Skip to main content
affpapa.org
RU EN
skill CX Codex

design-workflow — Claude Code skill for UI design

This skill guides UI prototyping and design reviews around a project’s existing design system. Use it when building components, screens, or responsive layouts.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add c0x12c/ai-toolkit --skill design-workflow -a claude-code
Open on GitHub

What design-workflow does

The workflow starts with .planning/design-config.md, the theme files it points to, and components already in the codebase. It then breaks the work into stages, from design tokens and basic components to full screens, interface states, and responsive layouts. New UI follows the project’s existing patterns.

Its checks cover color, type, layout, cards, and loading, error, and empty states. Prototypes should use real copy and loaded fonts, with colors taken from the project theme files. If .planning/design-config.md is absent, guidance tied to the project’s brand settings cannot be applied as written.

When references are available, the skill recommends learning from their visual quality without reproducing their layouts. It points to checklists.md for self-review and for investigating gaps between a design and its implementation.

What it helps with

  • align new components with the project’s design system
  • assemble screens from basic and composite components
  • spot generic patterns in a UI
  • check loading, error, and empty states
  • adapt layouts for different viewport sizes

Example prompts for the agent

  • Build a screen prototype using the project’s existing design system and components.
  • Review this UI for generic design patterns and suggest changes that fit the current theme.
  • Create the page in stages and add loading, error, and empty states.

How to install design-workflow

1Skills CLI (Vercel)

npx skills add c0x12c/ai-toolkit --skill design-workflow -a claude-code

2Manually: put the files in place

~/.claude/skills/design-workflow/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/design-workflow/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about design-workflow

How do I install design-workflow in Claude Code?

Run npx skills add c0x12c/ai-toolkit --skill design-workflow -a claude-code. The skill file is at ~/.claude/skills/design-workflow/SKILL.md.

What does design-workflow do?

It lays out a staged process for UI work and checks that colors, fonts, components, and screen states follow the project’s design system.

Which project files should I check first?

Start with .planning/design-config.md, then inspect the theme files it lists and the existing components.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set24

market-research Research markets, competitors, funds, or technology with a structured workflow. Use the skill to gather evidence before testing a business idea or contacting an investor. CX Codex +1 ★ 109repo stars kotlin-best-practices A skill that pins down Kotlin conventions: null safety, Either instead of thrown exceptions, coroutines, and Exposed ORM patterns. Useful while writing or reviewing Kotlin. CX Codex +1 ★ 109repo stars investor-outreach Draft investor emails, introduction requests, follow-ups, and updates with help from this skill. Use it when reaching out to an angel, VC, or accelerator. CX Codex +1 ★ 109repo stars investor-materials A skill for producing investor-facing documents: a pitch deck, one-pager, memo and financial model. Useful when the numbers and the story have to line up across every file. CX Codex +1 ★ 109repo stars design-intelligence Bootstraps a design system from scratch: palette, type scale, spacing, radii and a component inventory in three formats. CX Codex +1 ★ 109repo stars database-table-creator This skill guides an end-to-end table addition, from a SQL migration to Kotlin repository tests. Use it when a project needs a new table or entity. CX Codex +1 ★ 109repo stars database-patterns Hands your agent a fixed set of database rules: column types, UUID keys, soft deletes and migration templates. Useful when it writes tables or repositories. CX Codex +1 ★ 109repo stars content-engine Turns an article, demo, or raw thought into tailored posts for X, LinkedIn, YouTube, and newsletters. Enforces platform rules and sharp hooks. CX Codex +1 ★ 109repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor