Taste-driven design. One editable HTML handoff.
An agent skill and Codex plugin for turning a visual brief into a distinctive interactive prototype. Explore directions, refine with screenshot evidence, and subtract what does not serve the product.
One self-contained design.html file:
- Embedded styles, scripts, and assets; opens offline without a build step.
- Essential interactions using deterministic local demo state.
- Multiple pages arranged in a labeled row-and-column board.
- Semantic markup, shared CSS tokens, readable behavior, and obvious edit points.
This is a developer design handoff, not a production backend. Simulated operations are identified. Aesthetic quality remains a judgment rather than a guaranteed score.
Copy the complete skills/world-class-design-craft directory into your agent's supported skill location. Keep its references directory alongside SKILL.md. For hosts with explicit skill invocation:
Use $world-class-design-craft to design a three-page travel planning app.
Make the itinerary the focal point. Deliver one offline HTML file with the pages
arranged in rows and columns, working filters, navigation, and an editable trip dialog.
On hosts without skill discovery, supply SKILL.md and its referenced documents as instructions using that host's supported mechanism. File-writing and browser tools enable full delivery and verification. Independent critics and image/video tools are optional; no vendor API or model is required by the skill.
The repository root is a Codex plugin package, declared by .codex-plugin/plugin.json. The nested skill is also independently portable. Configure the host or marketplace to load the repository's plugin root or its skill directory, respectively.
Marketplace registration, installation commands, and supported adapters vary by host. This repository does not claim to be listed or certified by any marketplace. No personal marketplace settings or absolute machine paths are included.
.codex-plugin/plugin.json
skills/world-class-design-craft/
SKILL.md
references/
html-handoff.md
critic-protocol.md
media-workflow.md
prompt-templates.md
source-notes.md
README.md
CONTRIBUTING.md
LICENSE
Keep the skill description and output contract aligned. Test a single-page design and a multi-page flow, opening each output offline and exercising the main interactions. Check both board layout and individual page viewports. See CONTRIBUTING.md.
Before publishing, set the real repository URL and publisher identity in plugin metadata if desired, review the license, and validate against the target host or marketplace. No remote repository URL is guessed or preconfigured.
The workflow is inspired by Anshu Chimala's design process in Lenny's Newsletter. See source notes for adaptation boundaries. This project is not affiliated with the author or publication.
Original project material is available under the MIT License. Referenced third-party materials remain under their own terms and are not included.