design-implementation

multicam's avatarfrom multicam

Streamlined UI development workflow with single-command feature implementation.Automates: dev server, browser, verification, error fixing, iteration loop.**Core Command:** "implement next feature" or "implement [feature description]"**What It Does:**1. Starts dev server (auto-detects port from package.json)2. Launches browser (visible by default, --headless available)3. Implements feature via frontend-design skill4. Verifies: console errors, TS errors, network failures, visual match5. Fixes iteratively (max 5 iterations)6. Reports completion or escalates with detailed report**Triggers:**- "implement next feature", "implement the hero section"- "verify this implementation", "check the UI"- "fix the errors", "iterate on this"- "start dev server", "manage server"

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Code Generation]

When & Why to Use This Skill

The design-implementation skill for Claude is a high-performance developer tool designed to automate the end-to-end frontend development lifecycle. By integrating dev server management, browser-based visual verification, and an iterative 'fix-it' loop, it allows developers to implement complex UI features from a single command. This skill bridges the gap between design and code by automatically detecting errors and refining the implementation until it meets visual and functional standards.

Use Cases

  • Rapid UI Prototyping: Automatically build and deploy frontend components like hero sections, login forms, or navigation bars based on text descriptions or design specifications.
  • Automated Visual Verification: Use the integrated Playwright runner to launch a browser and verify that the implemented UI matches the design without manual inspection.
  • Iterative Debugging and Error Correction: Automatically detect and resolve TypeScript errors, console failures, and network issues through a self-correcting loop of up to five iterations.
  • Dev Server Orchestration: Streamline local development by allowing the agent to auto-detect ports and manage the lifecycle of the development server (start/stop/restart) during the coding process.
  • Headless Testing for CI: Execute the full implementation and verification workflow in headless mode to ensure code quality and visual consistency in automated environments.
namedesign-implementation
contextfork
description|
Automatesdev server, browser, verification, error fixing, iteration loop.
**Core Command** "implement next feature" or "implement [feature description]"
**What It Does**
4. Verifiesconsole errors, TS errors, network failures, visual match
**Triggers**

Workflow Routing

Intent Workflow
"implement feature", "build the X" workflows/implement-feature.md
"verify", "check", "screenshot" workflows/verify-visual.md
"fix errors", "fix the issues" workflows/fix-errors.md
"start server", "stop server" workflows/manage-server.md
"test interactions", "click test" workflows/test-interactions.md

Quick Start

# Basic usage
"implement the login form based on the Figma design"

# With specific file
"implement the feature described in thoughts/features/hero-section.md"

# Headless mode (CI/testing)
"implement next feature --headless"

# Just verify current state
"verify the current implementation"

Configuration

Edit config.json in this skill directory:

{
  "browser": {
    "headless": false,
    "viewport": { "width": 1280, "height": 720 }
  },
  "server": {
    "port": "auto",
    "startCommand": "auto",
    "hmrDelay": 2000
  },
  "iteration": {
    "maxIterations": 5,
    "layoutTolerance": 0.95
  },
  "figma": {
    "enabled": true
  }
}

Tools

Tool Purpose
tools/playwright-runner.ts Browser automation (screenshot, console, network)
tools/server-manager.ts Dev server lifecycle (start, stop, detect port)

State Tracking

state.json tracks current feature progress:

{
  "currentFeature": "hero-section",
  "iteration": 2,
  "status": "fixing",
  "errors": ["console: Failed to load image"],
  "lastScreenshot": "history/hero-section/iteration-2.png"
}

Integration

Skill/Agent When Used
frontend-design Initial implementation
engineer agent Escalate complex bugs
design-iterator agent Multiple visual refinements

History

Each feature creates artifacts in history/{feature-id}/:

  • spec.md - Original feature specification
  • iteration-{n}.png - Screenshots per iteration
  • figma-reference.png - Design reference (if Figma link provided)
  • errors.log - Captured errors
  • report.md - Final completion report

Note: history/ is gitignored.