Guide · Agent skill
How to use the Aster Atelier Studio Website agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The aster-atelier skill is a starting template for an artistic creative-studio website, with cobalt and ivory colours, large serif headings, original illustrations and a scroll-driven point-cloud graphic. It is written for designers, small studios, developers and marketers who want a polished landing page or portfolio quickly. This guide explains what agent skills are, how to install this one, how to ask for a site in plain language, and what to check before you publish.
Aster Atelier Studio Websitenexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download and unzip. Download the ZIP from this skill's page on the directory and unzip it. Confirm the folder contains SKILL.md and open-design.json.
- 2Place the skill. Copy the folder into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Describe your studio. Ask in plain language for a cinematic studio website, and include the studio name, what it does, its services and any real facts you want on the page.
- 4Review the rendered page. Let the agent render the page and check the hero, chapter links, menus, dialog focus, forms and mobile layout at 390px.
- 5Replace placeholder content. Swap any sample copy with your real services, FAQs and contact details, and remove any claim you cannot back up.
- 6Test the form behaviour. Submit the form with required fields empty and filled, and confirm it only saves locally or offers the text brief download, since no external endpoint exists.
What an agent skill is and what this one makes the agent do
An agent skill is a folder of instructions and files that an AI agent can load when a request matches the skill's purpose. This skill's main file, SKILL.md, tells the agent to start from a finished, self-contained example page called example.html rather than writing a website from scratch.
When the skill is active, the agent keeps the page's layout, artwork and interactions, then adapts the brand name, copy, services and FAQs to your brief. It then renders the page and checks it on desktop and at a 390px mobile width.
- Five chapters: astronomer hero, point-cloud instrument and approach, observatory artwork and services, questions and contact, and an oversized wordmark footer.
- Native dialog navigation and contact form, and native details/summary accordions for services and FAQs.
- Reduced-motion support, and the canvas animation pauses while offscreen or in a hidden tab.
Install the aster-atelier skill in Claude
Download the ZIP from the skill's page on this directory and unzip it. For a personal install, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and add the skill there. The folder should contain SKILL.md and open-design.json, as the project README describes.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need special syntax. Describe the kind of site you want in ordinary words. The skill's listed trigger phrases include cinematic studio website, classical art portfolio, editorial creative agency, and the Chinese phrase 古典艺术工作室网站.
Give the agent the facts it needs: the studio name, what the studio does, the services, and any real contact details. The skill's guidance is to keep sensible defaults for optional details, so missing information is filled with placeholders rather than invented claims.
- Good: 'Make a cinematic website for an independent architecture studio called Solstice with three services and an FAQ.'
- Good: 'I need an editorial landing page for a creative agency, with a contact form and a text brief download.'
- Weaker: 'Make a website.' This gives the agent too little to adapt.
Example: adapting the seed to a new studio
The skill ships with an example prompt for an independent architecture studio called Solstice. It asks the agent to add an architecture-focused story, three services and useful FAQs, while preserving the original artwork, cobalt palette, scroll motion and responsive behaviour.
Use this pattern for your own brief. Name the studio, describe its story, list the services, and state which parts of the look must stay the same.
What you need and how to check the result
The skill needs an agent that can read and write files, or one that can return a single HTML artifact. A web browser is recommended so the agent can render the page and check it. The page itself is a single file: open example.html directly in a browser and no build step, network request, external font or dependency is needed.
Before you publish, check the items the skill's own checklist treats as required: headings are legible, the document does not scroll sideways at 390px, the menu, chapter links, accordions and contact dialog work by keyboard and pointer, and required form fields validate.
- The brand, services and FAQ must reflect your brief, with no invented metrics, clients or endorsements.
- Dialog close and Escape should return focus to a visible trigger.
- Reduced-motion users should see all content without continuous animation.
Safety notes: scripts, network and the form
The directory listing says this skill runs scripts and does not use the network. Review the files before you install them, as you would with any skill that runs code on your machine.
The contact form is local only. It has no external endpoint, so submissions are not sent anywhere. Users can download a text brief instead. If you need real booking, payments or stored enquiries, you will need a backend, which this skill does not provide.
- Fonts: no font files are shipped. The page uses system serif fonts such as Georgia or Times New Roman.
- Images: the two illustrations are embedded in the HTML, so they load offline.
- Brand: the demo brand is fictional and does not imply any real endorsement.
What people use it for
- A small architecture studio's portfolio landing page with three services and a Q&A section.
- A creative agency's editorial campaign page with a contact dialog and a downloadable project brief.
- A designer's personal portfolio with a dramatic hero and scroll-driven animation.
- A developer's starting HTML, CSS and JavaScript page with accessible dialogs and forms to build on.
Frequently asked questions
Is the aster-atelier skill free to use?
The directory lists the item's licence as Apache-2.0. The bundled ASSET-SOURCES.md file mentions an MIT licence for the template's code and illustrations, so read the LICENSE file in the download before you redistribute or commercialise the work.
How do I install the aster-atelier agent skill?
Download the ZIP from the skill's page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
What does the aster-atelier skill need to run?
It needs an agent that can read and write files, or one that can return a single HTML artifact. A web browser is recommended so the agent can render and check the page.
Does the contact form send submissions to a server?
No. The form has no external endpoint and only saves locally, with a text brief download as an alternative. If you need real submissions, you must connect your own backend.
Can I use this skill for a real client's brand?
It is designed as a starting point, not a finished brand. The skill ships no licensed fonts and relies on system serif fonts, so it does not match a specific existing brand identity without further work.
Why is my request not using the skill?
Use wording close to the listed triggers, such as cinematic studio website or classical art portfolio, and name the kind of site you want. The source does not describe other troubleshooting steps, so check that the folder is in the correct skills location.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a dramatic, polished studio or portfolio landing page built quickly from a working HTML starting point. Pick something else if you need a real backend, booking or payments, or if your site must match an existing brand with licensed fonts.
Download the skill