# Artistic Web Designer

> >

- **Type:** Skill
- **Install:** `agentstack add skill-tahabahrami-artistic-web-designer-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tahabahrami](https://agentstack.voostack.com/s/tahabahrami)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tahabahrami](https://github.com/tahabahrami)
- **Source:** https://github.com/tahabahrami/artistic-web-designer/tree/main/skill

## Install

```sh
agentstack add skill-tahabahrami-artistic-web-designer-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Artistic web designer

Build websites that behave like directed films: one continuous camera move,
scrubbed by scroll, with typography and interface composed on top of it.

The whole discipline reduces to two ideas. **One number drives everything** — a
normalized scroll progress from which every visual state is a pure function.
And **the artwork is directed, not collected** — generated in a planned order
from approved key frames, so twenty assets read as one authored piece.

Everything else in this skill is those two ideas applied.

## What good looks like

- Scrolling forward advances; scrolling back genuinely reverses; stopping freezes
  on a coherent frame; refreshing mid-page rebuilds exactly what was on screen.
- The opening is an overture. Every motif it introduces — a line, a marker, a
  frame, a number — becomes a component used further down the page.
- Typography is real HTML/SVG layered over the footage. Nothing readable is ever
  generated into an image.
- Mobile is a separately directed composition that hits the same beats, not a
  crop.
- It runs at 60fps on a phone, and it has a reduced-motion path that is
  legible rather than empty.

## The workflow

Work in this order. The expensive mistakes all come from doing step 4 before
step 3, or step 3 before step 2.

### 1. Read the brief for what it rejects

The negative space in a brief carries more information than the positive.
"Mature, cinematic, slightly raw" is vague; "not a mascot company, not a
children's illustration studio" is precise — it names the attractor the work
keeps falling into, and generative models have strong defaults that will drift
straight back toward it.

Before anything else, write down: three adjectives the work must earn, three it
must never be, the exact palette as hex with a note on which colour must *not*
dominate, and what the reader should feel in the first two seconds. If there is a
moodboard, extract its DNA — palette relationships, contrast, texture, type
attitude, use of negative space — not its content. Say explicitly what you took
and what you deliberately did not.

Read `references/art-direction.md` §1–3 before designing anything.

### 2. Design the page, then build the opening backward

Look at the sections beneath the hero *before* designing the hero, and derive its
rhythm from theirs — the grid, the type scale, the section numbering, the weight
of rules and frames. An opening designed in isolation will not match the page it
opens.

Find the organizing metaphor: a descent, a transit line, a signal tuning in, a
machine assembling. It decides camera movement, transitions, section labelling
and what the reusable components are. Hold the discipline that the metaphor
*organizes* the work and is not the *subject* of it — a studio site framed as a
transit system is still a site about the studio.

Then write the continuity table, mapping each opening element to the component it
becomes below. Anything with no descendant is decoration; give it one or cut it.

### 3. Author the score before making any art

This is the step people skip, and it is where the rhythm actually lives. Write
the timeline as named ranges in a config module, in normalized 0..1, before a
single asset exists:

```js
export const CHAPTER_LENGTH = {
  opening: { desktop: 520, mobile: 300 },   // svh
  work:    { desktop: 360, mobile: 320 },
}

export const STAGES = {
  SIGNAL:        [0.00, 0.117],
  DESCENT:       [0.117, 0.333],
  WORLD_WINDOWS: [0.333, 0.667],
  ARRIVAL:       [0.667, 0.850],
  PAGE_RELEASE:  [0.850, 1.000],
}

export const PHASES = {
  readout:  [-0.03, 0.03],   // negative start: already legible on frame one
  headline: [0.72, 0.85],
  actions:  [0.84, 0.91],
}
```

Boundaries land where the footage actually changes, not on round numbers.
Ranges outside 0..1 are deliberate: a phase starting below zero is already
present on the first painted frame; one ending above 1 is still leaving as the
chapter ends, so the exit reads as continuous with what follows.

Naming the stages first is what lets you brief the footage precisely — you are
commissioning a clip to cover `DESCENT`, not "some cool motion".

### 4. Generate the artwork, key plates first

**Stills before motion, always.** Iterating on a still costs a minute; iterating
on ten seconds of video costs many minutes and far more credits.

Generate the key plates at a wide aspect (21:9 works well) and crop down: the
first frame, the midpoint the camera passes through, and the final composition
the headline lands on. Design that last plate *for the typography* — if the
headline goes large on the left, reserve genuinely empty space there in the
prompt, not "busy but low contrast".

Present the plates for approval. Then generate motion, chained:

| Clip | `--start-image` | `--end-image` |
| --- | --- | --- |
| 01 | plate A | plate B |
| 02 | plate B | — free travel |
| 03 | last frame of clip 02 | plate C |

After the first clip, never generate from a text prompt alone — first/last-frame
chaining is what holds camera, lighting and palette across joins the reader never
sees. Append the same shared style block, including its negative constraints, to
*every* prompt; that is what makes the set look like one project.

Approve the direction once at the plate gate, then generate the batch — do not
ask permission asset by asset.

Read `references/art-direction.md` for prompt construction and
`references/higgsfield.md` for the parameters and the constraints that cost time
(`mode fast` caps at 720p; there is no 16:10; turn `generate_audio` off). If the
`higgsfield-generate` or `seedance-20` skills are installed, use them for the API
surface and keep this skill for the direction.

### 5. Build the pipeline

Scroll-driven motion ships as a **WebP frame sequence on canvas**, never as
scrubbed `` — generated clips carry a single keyframe and a trailing moov
atom, so seeking backward is progressively more expensive and fast scrubbing
silently desyncs. `frameIndex = round(p * (count - 1))` has none of that.

Copy `scripts/build-sequences.mjs` into the project and edit its tables. It
handles concatenating chained clips losslessly, sampling at exact timestamps
(with the retry that catches ffmpeg's silent zero-byte seek failure), WebP
encoding, posters and ambient ping-pong loops.

Sizing: resolution is the lever, not quality — grain and halftone barely respond
to the quality setting. Aim for a frame every 3–5 svh. Details and budgets in
`references/media-pipeline.md`.

### 6. Build the page

Copy `assets/engine/` into the project — `engine.js`, `sequence.js`, `dom.js`,
`math.js`. This is working, debugged code; rewriting it means re-earning bugs
that are already fixed. `assets/engine/README.md` is the wiring guide.

Scenes are pure `render(p, ctx)` functions. No state, no direction branching, no
"has played" flags, and no layout reads inside `render`. If `render(0.4)` can
produce two different results depending on how the reader arrived, the experience
is broken in five ways at once.

Chapter lengths in `svh`, never `vh` — with `vh` the mobile URL bar changes
document height mid-gesture and the composition moves under the reader's finger.

For React or Next, read `references/react-adapter.md`. The short version: nothing
the engine animates may be React state, mount in `useLayoutEffect`, and
`destroy()` in the cleanup or Strict Mode gives you two engines fighting.

Read `references/scroll-architecture.md` when building this, and again whenever a
scroll bug stops making sense — it has a symptom-to-cause table.

### 7. Verify properly

Screenshots do not prove correctness here; the interesting failures are
conditional. Copy `scripts/qa-scroll.mjs`, configure its handful of constants,
and run it against Chromium, Gecko **and** WebKit — they differ in ways that
matter for sticky positioning and wheel granularity.

The essential assertion is direction-independence: reach seven sample positions
from above and from below, capture a visual signature at each, and compare them.
Include width, height and colour in the signature, not just transform and
opacity.

Then look at the work: walk the page with Playwright and capture screenshots,
and walk the opening's own 0..1 range at finer granularity. Check the **first
frame** especially — it is what every visitor sees and the likeliest to carry a
generation artifact. Drive this with Playwright rather than an embedded browser,
which throttles `requestAnimationFrame` when unfocused and makes seeks look
broken when they are not.

`references/verification.md` has the full property list and the mobile and
reduced-motion passes.

## Things worth holding to

**Never generate readable text.** No headlines, labels, numbers or logos in any
generated asset — it will be wrong, it cannot be edited, translated, selected or
read aloud, and it cannot re-wrap. Keep it as a hard negative in the style block.
Draw the mark as SVG geometry instead, generated from a script so the nav, footer
and favicon set come from one definition and cannot drift.

**Keep the layers separate**: footage / typographic overlay / navigation and
controls / texture. Nothing essential is ever baked into the video.

**Performance is architectural, not a pass at the end.** No framework state per
frame, refs and canvas for hot updates, DPR capped at 2, bounded frame residency,
progressive loading, and a boot state gated on the first few real frames rather
than a spinner on a white page. The loading state should come from the same
visual system as everything else.

**Say when something is wrong.** If a generated plate carries an artifact, or a
composition is not working, name it plainly rather than quietly patching pixels —
regenerating from a corrected plate beats a smudge band across thirty frames, and
changing an approved plate is the user's call.

## Files

| Path | Read when |
| --- | --- |
| `assets/engine/` | Building the page. Copy these four files in; README.md wires them up. |
| `references/scroll-architecture.md` | Building, or debugging anything scroll-shaped. Has a symptom → cause table. |
| `references/art-direction.md` | Before generating anything. Prompt construction, chaining, continuity. |
| `references/media-pipeline.md` | Turning clips into shipped assets. Sizing, ffmpeg recipes, budgets. |
| `references/higgsfield.md` | Before a generation batch. Parameters and the constraints that waste time. |
| `references/react-adapter.md` | The project is React or Next. |
| `references/verification.md` | Testing. The property list, and assertion hygiene. |
| `scripts/build-sequences.mjs` | Copy into the project; edit the tables at the top. |
| `scripts/qa-scroll.mjs` | Copy into the project; configure the constants at the top. |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [tahabahrami](https://github.com/tahabahrami)
- **Source:** [tahabahrami/artistic-web-designer](https://github.com/tahabahrami/artistic-web-designer)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-tahabahrami-artistic-web-designer-skill
- Seller: https://agentstack.voostack.com/s/tahabahrami
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.