Claude Design Idea to Ready

Take a UI from a one-line idea to on-brand, shippable design with Claude, in the correct order — brand foundation first, then components, screens, interactions, accessibility, and only then generation via /design. Use whenever someone wants to design, redesign, or generate a screen, page, component, or onboarding flow and wants the output to match an existing brand instead of looking like generic AI UI. Triggers on "design this screen", "build a UI for", "make this on-brand", "redesign", "generate a page/component", "use /design", or any task that will produce visual interface.

5 stars 1 forksAI, LLMs & Agents

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add chohra-med/claude_design_skill --skill claude-design-idea-to-ready

Manual install

git clone --depth 1 https://github.com/chohra-med/claude_design_skill.git /tmp/claude_design_skill
mkdir -p ~/.claude/skills
cp -r /tmp/claude_design_skill/. ~/.claude/skills/claude-design-idea-to-ready

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# claude-design-idea-to-ready

Drive a UI from idea to ready design in the order that actually produces on-brand output: the foundation before the screens, the generation last. This is the "brand first, generate second" pipeline. It composes with a memory bank-style memory bank (drop it in your skills folder) or runs standalone.

## The core rule

The model can only be as on-brand as the constraints it has before it generates. So the work is upstream. Never run `/design` (or generate any UI) until steps 1 to 5 exist. If they do not exist, scaffold them first.

## When this fires

Any task that will produce visual interface: a new screen, a redesign, a component, a page, an onboarding flow, a "make it on-brand" pass. If the user opens with `/design` directly, stop and check that the foundation (step 1) exists first.

## The pipeline (run in order)

1. **Foundation.** Locate or scaffold two files: `design/tokens.ts` (one source of truth: color, type, spacing, radius, as names not hex) and a `## Design rules` block in `CLAUDE.md` (one accent, monochrome base, 8pt spacing, one primary action per screen, no glassmorphism). Read `references/foundation-templates.md`. Nothing else proceeds until these exist.
2. **Components before screens.** List the components the brief needs. Define each against the tokens, with variants and states, before composing any screen. See `references/component-checklist.md`.

Read the full skill on GitHub

Details

Skill name: claude-design-idea-to-ready
Repository: chohra-med/claude_design_skill
License: MIT
Repo updated: 27 June 2026

FAQ

What does the Claude Design Idea to Ready skill do?

How do I install the Claude Design Idea to Ready skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add chohra-med/claude_design_skill --skill claude-design-idea-to-ready. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Claude Design Idea to Ready popular?

It lives in chohra-med/claude_design_skill, which has 5 GitHub stars and 1 forks.

Related skills

Claudeshrink

g-akshay/ClaudeShrink

Automatically compress large natural text or log files before processing. Trigger when the user pastes massive text blobs, or asks to analyze a large file (logs, docs, transcripts), or provides a prompt that is too large for the context window. DO NOT trigger on source code files or structural data (JSON, XML).

AI, LLMs & Agents

Awaken Agent Skills

Awaken-Finance/awaken-agent-skills

Awaken DEX trading and market data operations for agents.

AI, LLMs & Agents

Eforest Agent Skills

eforest-finance/eforest-agent-skills

eForest symbol and forest NFT operations for agent workflows.

AI, LLMs & Agents

AI Repo Safety

letya999/ai-repo-safety-skill

Git-hook-backed secret and supply-chain gates for AI-coded repos. Use when initializing a repo, handling a leaked secret, making a public release, or when the user names this skill. Do not load just because a coding session started.

AI, LLMs & Agents

Filemaker AI Vocabulary

andykear/FileMaker-AI-vocabulary

Use this skill whenever Claude needs to name, call, or validate a FileMaker function or script step — writing a calculation, writing a script, checking whether a function or script step exists, checking parameter order or count, or checking whether a script step is supported on a given platform (Pro, Go, WebDirect, Server, Cloud, Data API, Custom Web Publishing). Trigger any time FileMaker calculation syntax or script step syntax is being written or reviewed. Do not name or call a FileMaker function or script step from memory alone — check the reference files first.

AI, LLMs & Agents

AI Native

initxy/ai-native

Turn a repo into an AI-native project — lay down AGENTS.md, standard verbs, gates, a doc-hygiene check, and the spec directory. Use when asked to initialize or set up a repo for coding agents, add or rework AGENTS.md, make a project AI-native, or re-run / upgrade that setup. Works on new and existing repos.

AI, LLMs & Agents

Browse the most popular Claude skills, all ai, llms & agents skills, or write your own with the skills generator.