Skip to content
Get packs

Aster Atelier Studio Website

Builds a cinematic, classical-art style creative studio website with scroll motion and serif typography

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
5 files

What it does

When this skill is installed, the agent starts from a finished, self-contained example web page (example.html) with an artistic look: cobalt blue and ivory colours, large serif headings, original illustrations and a scroll-driven animated point-cloud graphic. The agent adapts the brand name, copy, services and FAQs to your brief while keeping the layout and interactions, then checks the page renders correctly on desktop and a 390px mobile width. It is meant for quickly producing a polished landing page for a studio, agency or portfolio.

Great for

  • Designers or small studios who want a dramatic portfolio or agency landing page quickly
  • Developers who need a working HTML/CSS/JS starting point with accessible dialogs and forms
  • Marketers prototyping an editorial-style campaign site for a creative brand

Skip it if

  • Projects needing a real backend, booking or payment system: the form only saves locally and has no external endpoint, so submissions are not sent anywhere
  • Sites that must match a specific existing brand identity or use licensed fonts: the skill ships no font files and relies on system serif fonts
  • Anyone expecting a real client or case-study content: the demo brand is fictional and the skill forbids inventing metrics, awards or endorsements, so you must supply real facts

Try asking

  • “Create a cinematic website for an independent architecture studio called Solstice with three services and FAQs”
  • “Make an editorial creative agency landing page in the Aster Atelier style for my photography business”
  • “Adapt the classical art portfolio template for a small ceramics studio, keeping the scroll animation and mobile layout”
Step-by-step guide: how to use Aster Atelier Studio WebsiteInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the Apache-2.0 licence and an attribution note.

    aster-atelier.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip aster-atelier.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aster-atelier.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your brand name, services, and real FAQ content up front so it does not have to invent them, and say explicitly if no client claims should appear.
  • Ask the agent to run the checklist in references/checklist.md and report the rendered result, especially mobile overflow and modal focus behaviour.
  • Replace the form's local-only behaviour with your own backend yourself if you need submissions to be stored or emailed; the skill does not provide one.

What's inside

  • ASSET-SOURCES.md
  • open-design.json
  • README.md
  • references/checklist.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.