create-design-system-rules

To generate design system rules for Figma-to-code implementations, analyze your codebase to tailor component organization, styling, design tokens, and MCP integration rules, then save them to CLAUDE.md at the project root for Claude Code to load automatically.

Design tokens are standardized variables for styling properties like color and spacing. The Skill analyzes your codebase to craft specific rules for token organization and MCP integration, ensuring Figma-to-code workflows remain consistent across web projects.

Yes, you can use this design system rules generator with typical web projects. It analyzes your specific project languages and frameworks to tailor rules for component organization, styling, accessibility, and design tokens accordingly.

The best way to enforce Figma-to-code conventions is to save generated project-specific design system rules to CLAUDE.md in your project root, allowing Claude Code to automatically load and apply these styling and MCP guidelines during implementation.

You need CLAUDE.md because it serves as the configuration file at your project root where generated design system rules are saved. Claude Code loads this file to automatically enforce your project's styling, token, and MCP conventions during development.

To update design system rules as your project grows, iterate with team feedback and re-run the generation process to analyze the codebase. This evolves the component organization, styling, and design token rules saved in your CLAUDE.md file.