Atelier is a design skill for coding agents. It follows proven design prompts, uses real photography and checks its own work in a browser before handing it back.
$ npx github:alexchwoj/atelier-skill
Works with Claude Code, Codex, Cursor, OpenCode and Gemini CLI.
Each pair was built by Claude Opus from the exact words quoted, once on its own and once with Atelier installed. Drag across a picture to compare, or open both pages and scroll them. Requests written in Spanish are shown translated; nothing was edited by hand afterwards.
“Make a landing page for Kabel & Röhre, a Berlin workshop that restores vintage analog synthesizers (Moog, Roland, Korg, ARP) and sells them with a one-year warranty. They also take in customers' gear for repair. I want it premium with lots of personality, nothing generic. Sections: hero, how we restore, instruments for sale, why us, and a form to book a slot and drop off gear.”
WithoutWith Atelier
“Casa Lume is an architecture studio in Lisbon that designs concrete-and-timber houses facing the Atlantic. Build the first screen of their landing page (nav + hero). The one action: book a studio visit. Make it look premium.”
WithoutWith Atelier
“Relay: AI agents that handle freight dispatch, carrier emails and load booking for logistics teams. Build the first screen of the landing page (nav + hero). The one action: request early access. Make it look premium.”
WithoutWith Atelier
“Kōyō: ceremonial-grade matcha from Uji, sold direct to consumers by monthly subscription. Build the first screen of the landing page (nav + hero). The one action: start a subscription. Make it look premium.”
WithoutWith Atelier
“Make the landing page for Brasa, an Argentine grill in Madrid: wood-fired cuts, Mendoza wines and a counter facing the fire. Make it premium with character. Sections: hero, the menu (a few dishes), the fire (how we cook) and bookings.”
WithoutWith Atelier
“Landing page for Cuaderno, a study app for medical students: it turns notes and PDFs into spaced-repetition flashcards and asks exam-style questions. I want something modern that doesn't look like the typical SaaS. Sections: hero, how it works, a sample of the app, pricing (free and Pro at €6/month) and a final CTA.”
WithoutWith Atelier
“Portfolio for Inés Vidal, an architecture and landscape photographer in Barcelona. Very editorial, with the photos as the stars. Sections: cover, selected work (gallery), about, clients and commissions, and contact.”
WithoutWith Atelier
“Make a HUD for Escape from Tarkov using this capture as the background. Build it in HTML/CSS at 16:9 to see how it looks.”
“Make a HUD for DiRT Rally 2.0, for this rallycross race. Use this capture as the background. Build it in HTML/CSS at 16:9 to see how it looks.”
“Design the Escape from Tarkov inventory screen (what you see when you press Tab in a raid): the character's gear, the rig and the backpack with their item grids, and the health status. Build it in HTML/CSS at 16:9.”
“Make the logo for Molino, a sourdough bakery in Valencia that mills its own flour. Show it on a page: the main logo large, the version on a dark background, the small icon (as a favicon or seal), the palette and the typography.”
WithoutWith Atelier
“Logo for Vela, an app that helps freelancers set aside tax and save from every payment they receive. It has to feel calm and trustworthy, nothing like generic fintech. Show it on a page: main logo large, dark version, app icon, palette and typography.”
WithoutWith Atelier
“Logo for Ruido, a three-day electronic music festival in an abandoned factory in Mexico City. Strong, with attitude. Show it on a page: main logo large, versions on light and dark, the small icon (for wristbands and social), palette and typography.”
WithoutWith Atelier
“Make the logo for Marea, a surf school in Fuerteventura for beginners and families. Show it on a page: the main logo large, the version on a dark background, the small icon (favicon or board sticker), the palette and the typography.”
WithoutWith Atelier
“This landing was made by an AI and it shows. Take out everything that looks AI-made and leave it right, without changing the concept or the real content.”
BeforeAfter deslop
“This landing was made by an AI and it shows. Take out everything that looks AI-made and leave it right, without changing the concept or the real content.”
BeforeAfter deslop
“This brand identity page was made by an AI and it shows. Take out everything that looks AI-made and leave it right, without changing the logo or the concept.”
BeforeAfter deslop
“A landing page hero for 'Halden & Co.', a small architecture studio in Oslo that designs timber houses, with a choreographed entrance animation.”
“An animated logo reveal for 'Northline', a hiking-route app, shown on a simple brand page. Also deliver the same animation as a Lottie JSON file (northline.json) next to the page.”
“An 'Add to bag' button for an online specialty coffee roaster's product page, with satisfying click feedback: press, a short loading state while the request runs, and an added state. Show it in context on a minimal product card.”
“A toast notification system for a file-upload app. Several toasts can be on screen at once and stack (upload complete, upload failed with retry, uploading with progress). Include demo buttons to trigger each kind.”
“A task list for a vegetable-garden planner where tasks can be added, completed, deleted and reordered (drag, plus move up/down buttons), with animated list changes.”
“A two-view portfolio for a documentary photographer in one HTML file: a work index (grid of projects) and a project detail view, with page transitions between them (open a project, go back).”