Ceramics storefront
frontend-design by Anthropic
Turn a shop brief into a working frontend demo.
Open skill on GitHubAdd this skill to your coding assistant, then paste the example input.
How to add the skill
From the original GitHub repository, download the source ZIP and extract the skills/frontend-design folder with its supporting files.
For Claude Code, place the folder in .claude/skills/frontend-design/. For Codex, use .agents/skills/ in your project. Open your project and ask your assistant to use frontend-design with your own request.
Output
How it was made
Example input
Build a white-background ceramics shop called Stillware with six fictional products. Use a supplied pottery photograph, clear typography, category filters, and an interactive demo bag. Make it responsive. Do not include checkout or payments.
Test notes
A self-contained HTML storefront with six products, category filters, and a demo bag. Product details are fictional; the photograph is supplied, not AI-generated.
- Opened the generated HTML locally in Chrome.
- Filtered six products down to two cups.
- Added a cup to the demo bag and confirmed the $28 total.
- Checked narrow-screen layout for horizontal overflow.
Wrote a design plan before coding. Supplied a licensed photo by Diana Light from Pexels and fictional product data. Captured the actual rendered page for this preview.
One example generated in a Codex session using GPT-6. This is a frontend demo, not a working commerce backend. No payments, persistence, skill-free comparison, or independent security audit.
Tested 2026-09-23 · Source 34040c9 · Apache-2.0
We publish our own example outputs. We do not sell or host this creator’s skill.