A month later, he comes back to the engineering team with a 10k line "index.html" file asking "How do I hand this off?" (he was definitely smart enough to know that just passing that file to us was not gonna fly). We decided to copy the designs into Figma for the handoff, both because that was the existing way we did design/engineering handoffs and also because creating high fidelity designs (e.g., "this color from our design system" and "this standard spacing value") isn't in Cursor's wheelhouse.
We're probably going to spend more time working on a better setup for him. At the very least he should be working against our codebase and components and colors and design tokens. But I'm very curious to see where it goes from here.
Personally, I’d really like to automate part of the workflow around exporting from Figma and assembling a design system into components — right now there’s just too much manual work involved.
Extra chars from JSON are the least of our problems with MCP.
How does it do applying styles from an existing codebase?
We have style guides, strong base css, etc. If that was represented when it built in Figma, that could be interesting.
figma-use variable create "brand/primary" --collection <id> --type COLOR --value "#3B82F6"
figma-use render ./Button.figma.tsx
const colors = defineVars({
primary: { name: 'brand/primary', value: '#3B82F6' },
})
export default () => (
<Frame style={{ backgroundColor: colors.primary }}>
<Text style={{ color: '#FFF' }}>Button</Text>
</Frame>
)