web-design-toolkit

Community@sunset1896/web-design-toolkit
Community skill — not reviewed. It was shared by 落嵛 and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: web-design-toolkit. Run `npx -y @neta-art/neta-search-cli@latest skills use @sunset1896/web-design-toolkit --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @sunset1896/web-design-toolkit
Summary

Build a photo editor or vector design app in the browser, or make fluted-glass photos, collage posters and title art.

  • Get a working Photoshop-style photo editor (layers, masks, filters, undo, open and save PSD files) or an Illustrator-style vector design app, published as a page.
  • Turn any photo into a fluted-glass look: ribbed stripes bend and blur the picture, then fade into clear glass. You get a PNG and an editable layered file.
  • Make a 1080×1620 collage poster: half real object, half white line drawing, with a clock, rays, ruins and a vertical title.
  • Design stylised title logos from 10 looks, such as metal retro, starlight, glitch and ocean halftone, in Chinese, English or mixed text.
  • Works best with a striking photo, a tall subject plus a clock and ruins for posters, or a short title with a clear theme.
SKILL.md
# Web Design Toolkit

One toolkit covering the whole "design in the browser" workflow:

```
pick a lane → serve the editor template → work (build features OR drive a recipe) → QA gates → publish
```

| Lane | What you deliver | Where |
|---|---|---|
| **A. Raster editor** | a published Web Work: a working Photoshop-style photo editor | [editors/raster/](editors/raster/) |
| **B. Vector editor** | a published Web Work: a working Illustrator-style design app | [editors/vector/](editors/vector/) |
| **C. Reeded glass** | PNG + layered PSD turning any photo into fluted glass | [recipes/reeded-glass/](recipes/reeded-glass/) |
| **D. Time-shatter poster** | 1080×1620 collage poster PNG + ~74-layer PSD | [recipes/time-shatter/](recipes/time-shatter/) |
| **E. Title typography** | stylised title logo artwork (glyphs → effects → ambience) | [recipes/title-type/](recipes/title-type/) |

Lanes A and B **build or fix an editor**. Lanes C, D and E **use the raster (and vector) editor
as a production tool** to make a finished piece — they drive the same templates with real
mouse/keyboard input, so the recipe scripts need Lane A's editor on a local port.

## 0. Pick the lane (then don't ask again)

- "build / fix / extend a photo editor, web Photoshop" → **A**; "vector editor, web Illustrator,
  design canvas" → **B**. If the request leaves the feature scope open, agree scope from the
  lane's checklist, then proceed without more questions.
- A named effect or poster ("长虹玻璃", "时间破碎", a title logo, "reproduce this tutorial")
  → **C / D / E**. These lanes need the raster editor template served locally (and E also uses
  the vector editor for glyphs).
- User asked for "a design tool" without raster/vector: choose by their assets — photos to
  retouch → raster; logos, posters, line art → vector. Say which you picked.

## 1. Serve an editor (shared by every lane)

```bash
SK=<this skill's folder>
# raster (never port 8790; the vector lane owns it)
python3 $SK/editors/raster/tools/srv.py $SK/editors/raster/template 8791 &
# vector (no-store; module caching will lie to you otherwise)
python3 $SK/editors/vector/tools/srv.py $SK/editors/vector/template 8790 &
```

`?fresh=1` skips the vector editor's autosave restore. Never reuse a busy port; both `srv.py`
variants serve with `Cache-Control: no-store` — stale ES modules make QA lie.

Both templates are complete, verified editors. Start from them; rewrite from scratch only when
the user explicitly asks. First-time QA dependencies: `bash $SK/editors/<lane>/install.sh`
(puppeteer-core for driving, psd-tools for PSD interop — optional).

## 2A. Build / fix the raster editor

Publish target: a directory Web Work `works/webs/<slug>/` (plain ES modules, no build step).

1. `node /mods/neta/neta work init web works/web/<slug> --title "<title>"` (folder may
   normalise to `works/webs/<slug>`), `cp -r $SK/editors/raster/template/* works/webs/<slug>/`.
2. Run the QA gates once before changing anything (§3) so you know what was green.
3. **One feature at a time.** Never batch features and test at the end. The loop:
   a. Write the reference behaviour first (shortcut, modifier timing, cursor, undo granularity).
   b. Implement in the right module: pixel maths in `js/core/imageops.js` (pure, worker-safe),
      compositing in `js/core/render.js`, state through `app.commit(label)` so history works.
   c. Drive it in a real browser: `editors/raster/tools/lib.mjs` (`open()`, `drive(page)`) sends
      real `page.mouse`/`page.keyboard` events in **document coordinates**, then asserts numbers
      from `window.__app` (pixels via `flatten()`, layers via `doc.rows()`, history labels).
      Add the assertion to `tools/layers.mjs` or a new script so it stays guarded.
   d. Screenshot and **look at it**. Assertions miss broken icons, overlapping panels, wrong cursors.
   e. Fix → re-run `tools/smoke.mjs` so nothing else broke.
4. There is no desktop Photoshop in the sandbox: compare against documented behaviour and
   user-supplied captures, and say so. PSD files: `tools/psd_interop.py` is the independent check.

## 2B. Build / fix the vector editor

Same publish shape; template ships paper.js, paperjs-offset, opentype.js and five OFL fonts.

1. Init + copy template (same as 2A but from `editors/vector/`).
2. Open `http://localhost:8790/?fresh=1` (viewport 1440×960) and implement one feature at a time,
   with `editors/vector/tools/harness.js` driving and `fuzz.js` (≥3 seeds, zero errors) +
   `perf.js` gates after each feature.
3. Visual pass on screenshots before calling any feature done.

## 3. QA gates (all must pass before you call it done)

| Gate | Raster | Vector |
|---|---|---|
| feature assertions | `tools/smoke.mjs`, `tools/layers.mjs` | `tools/harness.js` |
| random input | — | `tools/fuzz.js` (≥3 seeds, 0 errors) |
| performance | `tools/perf.mjs` | `tools/perf.js` |
| visual | screenshot read | screenshot read |
| PSD interop | `tools/psd_interop.py` | — |

A gate that cannot run (no Chrome) is reported, not skipped silently: say what could not be
checked and why.

## 4C. Reeded glass (长虹玻璃)

Driver: `recipes/reeded-glass/tools/reeded.mjs` (env `PSW_URL`, needs the raster editor served).

```bash
PSW_URL=http://localhost:8791/index.html node $SK/recipes/reeded-glass/tools/reeded.mjs \
  --image <photo> --out <dir>/<name> [--stripe 40] [--blur 40] [--displace 4] [--soft 60] \
  [--fade bottom] [--fadeFrom 0.62]
```

Delivers `<name>.png` + `<name>.psd` (Background photo; group `Reeded Glass` with mask holding
`Stripes` smart object in Soft Light and `Glass` smart object carrying **Motion Blur 90° +
Displace** as editable smart filters) + `<name>-stripes.psd` (the displacement map).

The mechanism, if you adapt it: gradient stripe = rib height map → Duplicate + Transform Again
(Ctrl+Alt+Shift+T) tiles the ribs → stripes saved as a PSD become the Displace map → Motion Blur
90° smears along the ribs → Displace shifts each pixel sideways by the gradient → stripes on top
in Soft Light → group + mask fades to clear glass. Full table and tuning ranges:
[recipes/reeded-glass/technique.md](recipes/reeded-glass/technique.md).
Tuning: rib width ≥ 12 px (else blur swallows ribs); blur ≈ 1× rib width; displace above ~8 %
breaks the picture into visible slices.

## 4D. Time-shatter poster (时间破碎)

Driver: `recipes/time-shatter/tools/poster.mjs`. Inputs: **transparent** PNG cutouts of a tall
subject and a round front-on clock, plus a ruins/architecture photo. Generate originals with
`neta generate image` (prompt skeletons in
[recipes/time-shatter/assets.md](recipes/time-shatter/assets.md) — never the tutorial author's
images) and cut out with the background-removal skill in no-crop mode.

```bash
PSW_URL=http://localhost:8791/index.html node $SK/recipes/time-shatter/tools/poster.mjs \
  --subject subject_cut.png --clock clock_cut.png --ruins ruins.png \
  --out <dir>/<name> [--title "<short title>"] [--accent "#0f4c81"] [--ground "#d8d4cc"]
```

Delivers 1080×1620 PNG + ~74-layer PSD. Visual language: half real object / half white line
drawing (two copies of one smart object with complementary masks, line art via Desaturate →
Trace Contour → Invert → Maximum 1 px → Screen), sliced accent slab, gradient discs sitting
exactly on mask boundaries, clock crowned with rays made by Free Transform around the ring
centre + Ctrl+Alt+Shift+T, Trace-Contour ruins line art on Multiply, error-icon glyphs, vertical
title, grain. Full layer stack and adaptation notes:
[recipes/time-shatter/technique.md](recipes/time-shatter/technique.md).
Keep the vertical title ≤ 8 characters (the script shrinks longer ones).

## 4E. Title typography (标题字设)

No driver script — a judgement workflow: **glyphs (vector editor) → effects (raster editor) →
ambience (generated overlays)**.

1. Pick the recipe closest to the request from
   [recipes/title-type/recipes.md](recipes/title-type/recipes.md) (10 styles: metal retro gacha,
   vertical starlight, mystic starfield, ribbon laser, ocean halftone, water ripple, glitch
   signal, ribbon-script mix, letter mashup weave, geometric construction). Mix one English
   technique in if the title is bilingual.
2. Glyphs in the **vector** editor: import a licensed CJK font first (template fonts have no CJK
   glyphs; use Source Han Serif / OFL fonts), set the base arrangement (staggered sizes, particles
   small and lifted), rebuild only 3–5 signature strokes (sharpened flares, extended
   crossbars, stroke replacement, inter-letter weave), export SVG/PNG transparent at 2–3×.
3. Effects in the **raster** editor: place the glyph PNG, stack per recipe (gradient clipped to
   the lettering, stroke/shadow, displacement for print wear, glow via Linear Dodge, starlight
   particles). Gradient overlays the replica can't do: draw a multi-stop gradient rect in the
   vector editor, export PNG, clip it to the lettering.
4. Ambience: user assets or `neta generate image` originals on pure black with no text
   (prompt skeletons in recipes.md §10), stacked in Screen / Linear Dodge — no cutout needed.
5. Export PNG (poster ratio the user names; default 1080×1620 for vertical, 1920×1080 for wide).
   One headline variant + one alternative if time allows; look at both before delivering.

Bilingual rule: English always reads "lighter" than the CJK — thinner, smaller, fainter, or
behind it. Script signature: theme-object decides effects (sound waves → glitch bars; ripples →
displacement; letters → star trails).

## 5. Publish and hand over

1. `node /mods/neta/neta work publish web works/webs/<slug>` (set the world slug if it asks).
2. Place the card on the board with board-ops `place.mjs --work works/webs/<slug>`.
3. For recipe lanes the deliverable is the PNG/PSD as image Works + one line on what to tune
   (they can re-run tuning parameters for free — no regeneration).
4. Write `FEATURES.md` next to the project for editor lanes: what changed, verification,
   measured performance, known gaps.
5. **Hand over every deliverable with an interaction-components card pointing at it** — the
   published Web Work (id from the publish output) for editor lanes, the finished PNG for recipe
   lanes — on its own line in your reply.

## Fallbacks

| Missing | Do |
|---|---|
| Chrome for QA | report the gate as not run; keep assertions in place; say what is unverified |
| `neta generate image` unavailable (assets lane D/E) | ask the user for their own images; never fabricate the tutorial author's assets |
| vector editor's CJK font import fails | fall back to an AI title-image generation (recipes.md §10) + manual retrace of wrong glyphs; say the glyph work was AI-assisted |
| raster driver script errors on a step | re-run with `--verbose`; a failed smart-filter step degrades to a pixel-paste of the same result — deliverable identical, editability reduced; say so |

## Out of scope

- Do not change world settings, and do not delete existing files or unrelated Works.
- Real Photoshop/Illustrator files beyond PSD open/save and `psd_interop` checks; no AI/blocked
  third-party brushes.
- Cloning proprietary UI pixel-for-pixel beyond the shipped templates' original implementation.
- Commercial use of tutorial-derived artwork with someone else's images — generate original
  assets or use the user's own.
- Secrets, tokens, real accounts: never write them into projects.

## Reply language

Reply in the user's language. Deliverable text (editor UI strings, poster titles) follows the
end user's language — never hard-coded to one language.
Related skills
ascii-subject-effectVerifiedTurn the main subject of your photo into black or white ASCII characters, leaving the background as it was.