claude

design-from-code

Design UI changes from real source code: trace handler->query->schema to confirm what each number counts, iterate faithful AS-IS/TO-BE HTML mockups (keep/new/changed tags), lock a design doc, then delegate. Claude Code plugin & Codex skill.

1,005 on GitHubby nlookv1.0.0MITupdated 3 months agoDesign UX
/

Plugin design-from-code from marketplace awesome-claude-code-plugins in ccplugins/awesome-claude-code-plugins. Commands read from the repo's manifest — 1 month ago.

What it installs

Skills (1)

  • design-from-code

    Workflow skill that turns one issue/requirement into a design in the order "verify real code & data → iterate faithful HTML mockups → design doc (.md) → delegate implementation." When designing a change to existing UI, it reads the actual component source and data model instead of imagining them, an

View source on GitHub claudecodeplugins.dev

Problems found in this repo's manifests

  • "2-commit-fast" points to ./plugins/2-commit-fast, which doesn't exist in the repo — install will fail
  • "accessibility-expert" points to ./plugins/accessibility-expert, which doesn't exist in the repo — install will fail

More from ccplugins/awesome-claude-code-plugins

All 192 plugins →

stratarts

claude

27 professional business strategy skills - idea validation, market analysis, business modeling, marketing, metrics, and fundraising using proven frameworks

27 commands

1,005

craftsman

claude

Engineering-discipline toolkit: minimal-diff coding, root-cause debugging, recurring-bug detection, and honest completion reports. Ten agents, seven skills, and cross-platform hooks.

7 skills · 2 commands · 10 agents · hooks

1,005

Parallel Codex workers inside Claude Code — multi-agent orchestration with git worktree isolation, resumable sessions, and dual-model PR review.

9 commands · 3 agents · 2 MCP servers

1,005

weft

claude

Deterministic workflow tracking with event-sourced logs for Claude Code

11 skills · hooks

1,005

bedrock

claude

Second Brain automation for Obsidian vaults — entity management, ingestion, compression, and sync via Claude Code skills

10 skills

1,005

bullpen

claude

The senior dev, unbundled: ten senior-dev instincts as skills (skeptic, closer, attacker, fact-checker, interrogator, stop-digging, doorman, historian, chameleon, explainer), each with lite/full/ultra intensity.

10 skills

1,005

Similar plugins

superpowers

claudecodex

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

15 skills · hooks

obra/superpowers 316,836

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

diagram-design

claudecodex

Editorial diagrams in your brand, as self-contained HTML and SVG. Architecture, flowcharts, sequence, state machines, ER and database schemas, timelines, swimlanes, org charts, Gantt, Wardley maps, user journeys, service blueprints, UML class, lifecycle phase maps, and charts from bar, line and scatter to Sankey, treemap and heatmap, plus many more. Redraws draw.io, Mermaid, Excalidraw and PlantUML files. Exports SVG and PNG.

1 skill · 7 commands

cathrynlavery/diagram-design 66,757

daisyui

claudecodex

daisyUI component library skill

7 skills

saadeghi/daisyui 42,821

Backend API design, GraphQL architecture, workflow orchestration with Temporal, and test-driven backend development

9 skills · 1 command · 8 agents

wshobson/agents 42,461

Zero-dependency HTML presentation generator with safe presets, bold template-library styles, PPT conversion, and anti-AI-slop design philosophy.

1 skill

zarazhangrui/frontend-slides 32,274

Maintain design-from-code?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins192 plugins