| name | artystic |
| description | Aggressive design-polish skill for making websites feel authored, editorial, image-led, and typographically intentional. Use when a page looks too generic, safe, same-font, SaaS-like, cluttered, or visually under-authored. |
Artystic
Artystic turns competent screens into authored web artifacts.
It is inspired by the design logic of Open Design, Midjourney, and Locomotive-style editorial websites: strong composition, meaningful image plates, mixed typography, minimal copy, and precise restraint.
Default visual direction: dark graphite / ultraviolet / cobalt / ember / porcelain. Do not default to green unless the user explicitly asks. The theme is tailored for Codex, Pi, Claude Code, Cursor, and other coding-agent surfaces that need aura: creative tooling launches, AI design labs, agent skill pages, portfolios, image-led software, editorial product pages, and interfaces where taste is part of the product.
Page structure should be deep enough to explain the skill like a real product system. Use Open Design-style issue sequencing: hero, field/source metadata, manifesto, capabilities, proof plates, prompt refinery, command surface, FAQ. Do not stop at a short landing page.
Non-negotiables
- Do not make a generic polished SaaS page.
- Do not add decorative boxes just to fill space.
- Do not use one font voice everywhere.
- Do not copy reference sites literally.
- Do not let image containers be meaningless.
- Do not repeat the same product truth in three sections.
- Do not add motion unless it stages attention or reveals structure.
Typography rule
Use fonts by role:
- Sans: structure, navigation, main readable copy.
- Mono: metadata, issue labels, command syntax, coordinates, small system text.
- Serif or italic serif: emotional impact words only.
If every important line uses the same font, the design failed.
Image rule
Every image/plate must carry meaning.
A plate can show:
- the artifact being judged
- a process diagram
- a visual metaphor tied to the product
- an editorial object
- a catalog/document feeling
A plate must not be a vague right-side container.
Composition rule
Prefer:
- fewer containers
- stronger asymmetry
- one dominant idea per viewport
- editorial rhythm
- section-specific personalities
- metadata that structures the page
- real generated assets over placeholder geometric filler
- source/field strips that make the page feel like a living issue, not a generic portfolio
- capability sections that explain how the skill thinks across audit, shape, polish, proof, prompt, and motion
Avoid:
- equal 3-card grids as the main design language
- repeated stat chips that do not explain anything
- hero copy longer than needed
- filled neon CTAs when outline treatment is calmer
- app-dashboard chrome unless the product actually needs it
Motion and scroll rule
Use premium motion only:
- scroll reveal for major sections
- sticky staging for hero/method anchors
- gentle image lift or scale on hover
- no bouncy, playful, or busy motion
- respect
prefers-reduced-motion
Motion should feel like a gallery/proofsheet reveal, not a startup animation kit. Buttons may use a Locomotive-inspired text-only hover: the label briefly glitches, shifts into the cursive/serif impact font, then resolves back to the original readable text. Avoid background hover effects unless explicitly requested. The original label must remain intact in the DOM and usability must not depend on the effect.
Critique loop
For each pass, ask:
- What is the visual subject?
- Which word deserves typographic emphasis?
- Which container can be removed?
- Does the image plate mean something?
- Does this still look like a template?
- Is the CTA too loud?
- Can the hero lose five words?
- Does scroll motion clarify the sequence?
- Are generated assets used in the correct slots instead of fallback filler?
- Is the page long enough to explain the skill's operating system, not just advertise it?
- Does it include field/source metadata when the reference calls for publication-like structure?
- Does the copy explain the skill's perks and the theme it is tailored toward?
- Do buttons have a memorable interaction without becoming unreadable?
Output expectation
A finished page should feel:
- authored
- minimal but not empty
- editorial but not cosplay
- image-led but not decorative
- typographically varied but not messy
- closer to a designed artifact than a product template
