claude-design-implement

AI-powered design implementation skill for Claude Code -- execute fixes from design review reports with verified code changes.

What It Does

claude-design-implement is a standalone Claude Code skill that reads design review reports and systematically implements fixes with live verification. It handles:

• Reading design review reports -- Parses structured review output and extracts prioritized tasks (Blockers > High > Medium > Enhancements)
• Mobile-first implementation -- Starts at 375px and works upward through 768px, 1440px, and 1920px breakpoints
• Responsive design fixes -- Corrects overflow, typography scaling, spacing, and touch targets across all viewports
• Accessibility improvements -- Adds ARIA labels, keyboard navigation, focus management, color contrast fixes, and semantic HTML
• Component consistency -- Enforces design tokens, spacing rules, and established patterns
• Live verification -- Every fix is tested via browser at all breakpoints with screenshot evidence before moving on
• Iterative correction -- Up to 5 iterations per viewport to ensure issues are fully resolved

Install

curl -fsSL https://raw.githubusercontent.com/creo-kit/claude-design-implement/main/install.sh | bash

Or clone manually:

git clone --depth 1 https://github.com/creo-kit/claude-design-implement.git /tmp/claude-design-implement
cp -r /tmp/claude-design-implement/skills/creo-design-implement ~/.claude/skills/
cp /tmp/claude-design-implement/agents/creo-design-implement.md ~/.claude/agents/
rm -rf /tmp/claude-design-implement

Usage

Provide a design review report and let the skill implement the fixes:

/creo design-implement ./reports/design-review-2026-03-28.md

Auto-detect the latest review report:

/creo design-implement auto

The skill will:

1. Parse the report and prioritize tasks
2. Start the implementation at 375px mobile viewport
3. Fix each issue, verify with a screenshot, and move on
4. Progress through all breakpoints (375px, 768px, 1440px, 1920px)
5. Report completed and remaining tasks

Project Configuration

Create .claude/project-config.md in your project to customize behavior:

dev_server_url: http://localhost:3000
ui_framework: tailwind
reports_path: ./reports

Part of Creo

This skill is extracted from Creo, a comprehensive design and development toolkit for Claude Code. Creo includes 12 specialized skills covering design review, UX analysis, marketing content, SEO, DevOps, CI/CD, testing, and more.

Compatibility

Platform	Status
Claude Code	Primary target, fully supported
Codex CLI	Compatible
Cursor	Compatible
Gemini CLI	Compatible

License

MIT