frontend-design
Build an interface from the brief and the tokens rather than from a guess. Use only after grill-me, design-brief, information-architecture and design-tokens have run.
Install
npx skills add https://github.com/mshadmanrahman/claude-for-designers/tree/main/.claude/skills/frontend-design
claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install mshadmanrahman-claude-for-designers@llmmart
git clone https://github.com/mshadmanrahman/claude-for-designers.git
The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole mshadmanrahman/claude-for-designers collection as a plugin from our marketplace. Git is the plain clone.
Skill manifest
You are building the interface. Use everything that came before. Do not start from scratch.
Before writing any code, confirm three things are accessible:
- The design brief (from
/design-brief) - The design tokens as CSS custom properties (from
/design-tokens) - The task list indicating which component or screen is being built now (from
/brief-to-tasks)
If any of these are missing, ask for them before proceeding. Generating UI without a brief is guessing. Generating UI without tokens produces inconsistent output that will need to be refactored.
Build intentionally. For every component, before writing the first line of CSS:
- Name the design token it uses for each visual property (color, spacing, radius, shadow)
- Name the user it serves and the specific task it supports
- Name every state it must handle: default, hover, active, focus, disabled, error, empty
Do not generate decorative code. Every visual decision must trace to a token or a decision in the brief. If you are about to write a hardcoded color value, stop and use a token instead.
Output production-ready HTML and CSS with these requirements:
- All colors, spacing, and type use CSS custom properties from the design token file
- Focus states are visible and meet 3:1 contrast minimum against adjacent colors
- Mobile layout is handled at 375px width minimum (use
@media (max-width: 640px)) - Every interactive component includes an empty state (what the user sees before data exists)
- Touch targets on mobile are at minimum 44px height for all interactive elements
Structure the output as a single HTML file with a <style> block importing the token system at the top. Components are self-contained. Comments explain decisions, not syntax.
Files (claude-for-designers)
-
SKILL.md 1.9 KB
--- name: frontend-design description: "Build an interface from the brief and the tokens rather than from a guess. Use only after grill-me, design-brief, information-architecture and design-tokens have run." --- You are building the interface. Use everything that came before. Do not start from scratch. Before writing any code, confirm three things are accessible: 1. The design brief (from `/design-brief`) 2. The design tokens as CSS custom properties (from `/design-tokens`) 3. The task list indicating which component or screen is being built now (from `/brief-to-tasks`) If any of these are missing, ask for them before proceeding. Generating UI without a brief is guessing. Generating UI without tokens produces inconsistent output that will need to be refactored. Build intentionally. For every component, before writing the first line of CSS: - Name the design token it uses for each visual property (color, spacing, radius, shadow) - Name the user it serves and the specific task it supports - Name every state it must handle: default, hover, active, focus, disabled, error, empty Do not generate decorative code. Every visual decision must trace to a token or a decision in the brief. If you are about to write a hardcoded color value, stop and use a token instead. Output production-ready HTML and CSS with these requirements: - All colors, spacing, and type use CSS custom properties from the design token file - Focus states are visible and meet 3:1 contrast minimum against adjacent colors - Mobile layout is handled at 375px width minimum (use `@media (max-width: 640px)`) - Every interactive component includes an empty state (what the user sees before data exists) - Touch targets on mobile are at minimum 44px height for all interactive elements Structure the output as a single HTML file with a `<style>` block importing the token system at the top. Components are self-contained. Comments explain decisions, not syntax.
Comments (0)
Sign in to join the conversation.
Reviews (0)
No reviews yet.
No comments yet.