claude

studio-design

Design-to-code pipeline — screenshot → Pencil prototype → OpenSpec proposal → working code

3 on GitHubby VanLengsv0.1.0Apache-2.0updated 8 days ago
/

Plugin studio-design from marketplace astra-studio in Ameng2001/astra-studio-plugins. Commands read from the repo's manifest — 6 days ago.

What it installs

Skills (3)

  • openspec-to-code

    Implement an OpenSpec change proposal as working React/Next.js code. Use when you have an approved OpenSpec proposal with requirements, scenarios, and tasks, and need to generate the actual UI components, pages, and routes. Reads tasks.md and spec deltas to produce production-ready code.

  • pencil-to-openspec

    Convert a Pencil (.pen) prototype file into an OpenSpec change proposal. Use when you have a .pen design prototype and need to generate structured requirements, scenarios, and implementation tasks for the UI. Produces proposal.md, tasks.md, and spec delta files.

  • screenshot-to-pencil

    Convert a UI screenshot into a Pencil (.pen) prototype file. Use when you have a screenshot or mockup image and need to create a machine-readable design prototype. Analyzes layout, components, colors, typography, spacing, and icons to produce a structured .pen JSON file.

Slash commands (4)

  • /studio-design:design

    Run the full design-to-code pipeline — screenshot → Pencil prototype → OpenSpec proposal → working code

  • /studio-design:openspec-to-code

    Implement an OpenSpec change proposal as working React/Next.js code

  • /studio-design:pencil-to-openspec

    Convert a Pencil (.pen) prototype into an OpenSpec change proposal

  • /studio-design:screenshot-to-pencil

    Convert a UI screenshot into a Pencil (.pen) prototype file

View source on GitHub

More from Ameng2001/astra-studio-plugins

All 10 plugins →

studio-insight

claude

Business analysis toolkit — personas, journey maps, process flows, domain modeling

6 skills · 6 commands · 12 agents

3

fund-review

claude

Government IT procurement quote optimization + financial review pre-audit — parse budget standard and quotes, produce standards-cited optimization suggestions, rewrite spreadsheets per approved plan, score review reports

12 skills · 4 commands · 2 agents

3

studio-docs

claude

Document delivery suite — blueprints, writing experts, parallel chapter generation, multi-format export (MD/DOCX/PDF)

6 skills · 4 commands · 1 agent

3

studio-evolve

claude

Self-evolving ontology pipeline — ground the IR in data evidence, derive simulated cases, attribute failed trajectories to five-element deficits as atomic proposals, and admit them only through a dual-gate sandbox scored on three growth axes (taller / sturdier / wider)

4 skills · 5 commands · 1 agent

3

studio-core

claude

Studio workspace management — init, promote, status

4 skills · 4 commands · hooks

3

studio-ontology

claude

FDE pipeline — compile business analysis (DDD/event-storm) into a runnable clife-onto-engine ontology plugin (five-element schema: Object/Link/Function/Rule/Action)

3 skills · 4 commands · 2 agents

3

Similar plugins

example-skills

claude

Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling

19 skills

anthropics/skills 193,780

pr-review-toolkit

claude

Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification

1 command · 6 agents

anthropics/claude-code 155,476

ui-ux-pro-max

claude

Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.

7 skills

nextlevelbuilder/ui-ux-pro-max-skill 148,759

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

impeccable

claude

Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.

1 skill · 4 agents · hooks

pbakaus/impeccable 109,099

storybook

claudecodex

Build, preview, and test UI components with Storybook.

7 skills

storybookjs/storybook 91,552

Maintain studio-design?

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 plugins10 plugins