Let the subject lead.
A full-width architectural study makes space, light and material the first thing you see. The crop is recomposed for mobile.
A design skill for coding agents
Give your agent
a clear direction.
Turn useful references into layout, typography and interactions for the page you already have.
Free & open source. Bring your own coding agent.
After · responsive captureFull-size capture
Fictional studio. AI-generated concept image. The before fixture deliberately contains defects; the form creates a local preview.
Look closer
The reference is
just the beginning.
Choose the useful part. Make a decision. Follow it through the running page.
Read this example’s design decisionsGive every element a role.
A clear type hierarchy, quieter supporting copy and a distinct enquiry section help the page read as one coherent design.
Finish the interaction.
Required-field errors retain your input. You can preview, edit and return by keyboard. Try it in the live example.
Make it part of your workflow
One skill.
Your next page.
- Download and extract the skill folder.
- Copy it into your agent’s skills directory.
- Open your project and give it a concrete brief.
Plain Markdown · 75 reference links · Optional Python lookup
No hosted service required.
Start with this brief
Use $web-reference-design to improve this page. Keep its brand, content, stack and working behavior. Inspect a reference that fits the task. Translate its useful parts into layout, type and interactions. Implement the change, review desktop and mobile, and check the affected states. Report actual checks.
Works with agents that support SKILL.md. Use your own reference library or the included catalog.
A different subject. A different direction.
Spoke Workshop
Explore a bicycle repair page with a service comparison and appointment preview.