design-implement-web
CommunityMockup-to-web code with design tokens
Authorjoi-fairshare
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill turns approved mockups into token-aligned web production code so designers and engineers can ship consistent experiences without manual front-end assembly.
Core Features & Use Cases
- Token-driven generation: Convert design-tokens.json through Design Token Bridge tools to produce tokens.css and tailwind.preset.js, ensuring no hardcoded colors or spacing.
- Mockup selection workflow: Prefer HTML mockups, surface PNG baselines when needed, and ask which screen to implement before generating React/Next.js components structured around the approved design.
- Compliance and reporting: Run the Dark Factory compliance pipeline, enforce focus/hover states, and remind teams to refine and verify the implementation before shipping.
Use case: after mockups are approved in a /design-mockup session, run this skill to translate the visual assets directly into deployable web components.
Quick Start
Invoke /design-implement-web with the approved mockup reference to produce token-compliant React/Next.js components.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-implement-web Download link: https://github.com/joi-fairshare/agentic-workflow/archive/main.zip#design-implement-web Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.