design-web

Name: design-web
Author: fusengine

21stars3forks

How to install design-web?

fusengine/agents/design-web

$npx -y skills add fusengine/agents --skill design-web

Installs into the current project.

Summary

Marketing sites, landing pages, campaign pages — register brand (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silh

Files · 1

View on GitHub

SKILL.md

1	## Design Web — Marketing & Landing, Register Brand
2
3	### When
4	After `design-system` tokens exist and `design-method`'s Gate 0 has locked register
5	`brand` (one dominant, expressive message). Read `design-method`'s routing table first —
6	a dashboard/app/utility surface routes to `design-webapp` instead. Exception: a
7	marketing-adjacent surface living inside an app shell (e.g. an in-app pricing page) still
8	routes here for that one page (see `design-webapp`'s reciprocal note).
9
10	### Input
11	- `design-system.md` — OKLCH palette, type pair, spacing density, the 3 dials.
12	- `design-method/references/register/brand.md` — the page's POV sentence and the
13	per-section Competitor Lift Test (loaded once per task, not re-read per step).
14	- The `generate` move report (`design-method/references/moves/generate.md`) if this task
15	started from Gate 0 — steps 1-4 of that report (register, inspiration, tokens,
16	macrostructure) are inputs here, not repeated.
17
18	### Steps
19
20	1. Structure comes from register + macrostructure, never from template reproduction.
21	`references/design-inspiration.md` browsing extracts palette, typography, and depth
22	cues ONLY — section flow, spacing rhythm, and layout are never copied from a reference
23	site. The actual skeleton is the macrostructure picked in `design-method`'s `generate`
24	move (`references/macrostructure-bank.md`) filtered through the POV in `register/brand.md`.
25	Reproducing an inspiration site's structure verbatim is the single biggest source of
26	templated output — treat it as a hard boundary, not a style preference.
27
28	2. Deviate the section order. The canonical skeleton
29	(nav → hero → features → testimonials → pricing → faq → cta → footer) is a detectable
30	flag when used verbatim end-to-end. Reorder, merge, or drop at least one section against
31	the POV — state which one moved and why in the generate-move report's macrostructure
32	line. `register/brand.md` §2 (Body ≠ SaaS Furniture) governs which sections are safe to
33	cut or fold.
34
35	3. Hero discipline (nngroup visual-hierarchy, lawsofux, refactoringui):
36	headline < 10 words, subhead < 20 words, 1 primary CTA, real product/brand
37	visual (not a stock abstraction). This word-count floor is tighter than
38	`references/layout-discipline.md`'s hero hard numbers (≤ 2 lines, ≤ 4-element stack) —
39	both apply; the tighter one wins on conflict. CTAs stay ≤ 3 touchpoints on the whole
40	page, secondaries visually subordinate to the one primary. Von Restorff: exactly one
41	visually distinct focal element per viewport reads as memorable — see the Focal-Block
42	Floor (`layout-discipline.md` rule 9), mandatory in this register.
43
44	4. Break grid and padding sameness. Prefer asymmetric column splits (2/1, 1/2,
45	span-2, bento) over a uniform 3-column grid reused section after section. Vary section
46	padding for rhythm — tight groupings inside a section, generous separation between
47	sections — instead of one uniform value applied everywhere. `layout-discipline.md`
48	still owns the numeric caps (eyebrow restraint, zigzag cap, bento N=N, section-repetition
49	ban) once a skeleton is chosen; don't re-derive those here.
50
51	5. Anti-slop mechanical flags (lintable, check the rendered markup — sources:
52	sailop ai-slop research, superdesign):
53
54	\| Slop signal \| Mechanical flag \| Antidote \|
55	\|---\|---\|---\|
56	\| Canonical section order \| The 8-section skeleton above, used verbatim, in that order \| Step 2 — deviate \|
57	\| Uniform 3-col grid \| Same grid-cols-3 (or equivalent) reused across ≥3 unrelated sections \| Step 4 — asymmetric splits \|
58	\| Uniform section padding \| Identical `py-20`/`py-24` (or equivalent) on every section \| Step 4 — vary per section \|
59	\| Eyebrow over every H1 \| See `layout-discipline.md` Eyebrow Restraint (max 1 per 3 sections) \| Already governed there — don't restate \|
60	\| Signature entrance motion \| `opacity:0 + translateY(20px)` + `ease-in-out` scroll-reveal — found on ~83% of AI-generated pages \| Vary offset/easing/stagger — `design-motion/references/entrance-patterns.md` \|
61	\| Reflex palette+font+shape combo \| Tailwind blue/indigo (hue 200–290°) + Inter + `rounded-2xl` used

People who liked this also viewed

6 picks

Type

design-web

21stars3forks

View on GitHub

How to install design-web?

fusengine/agents/design-web

$npx -y skills add fusengine/agents --skill design-web

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## Design Web — Marketing & Landing, Register Brand
2
3	### When
4	After `design-system` tokens exist and `design-method`'s Gate 0 has locked register
5	`brand` (one dominant, expressive message). Read `design-method`'s routing table first —
6	a dashboard/app/utility surface routes to `design-webapp` instead. Exception: a
7	marketing-adjacent surface living inside an app shell (e.g. an in-app pricing page) still
8	routes here for that one page (see `design-webapp`'s reciprocal note).
9
10	### Input
11	- `design-system.md` — OKLCH palette, type pair, spacing density, the 3 dials.
12	- `design-method/references/register/brand.md` — the page's POV sentence and the
13	per-section Competitor Lift Test (loaded once per task, not re-read per step).
14	- The `generate` move report (`design-method/references/moves/generate.md`) if this task
15	started from Gate 0 — steps 1-4 of that report (register, inspiration, tokens,
16	macrostructure) are inputs here, not repeated.
17
18	### Steps
19
20	1. Structure comes from register + macrostructure, never from template reproduction.
21	`references/design-inspiration.md` browsing extracts palette, typography, and depth
22	cues ONLY — section flow, spacing rhythm, and layout are never copied from a reference
23	site. The actual skeleton is the macrostructure picked in `design-method`'s `generate`
24	move (`references/macrostructure-bank.md`) filtered through the POV in `register/brand.md`.
25	Reproducing an inspiration site's structure verbatim is the single biggest source of
26	templated output — treat it as a hard boundary, not a style preference.
27
28	2. Deviate the section order. The canonical skeleton
29	(nav → hero → features → testimonials → pricing → faq → cta → footer) is a detectable
30	flag when used verbatim end-to-end. Reorder, merge, or drop at least one section against
31	the POV — state which one moved and why in the generate-move report's macrostructure
32	line. `register/brand.md` §2 (Body ≠ SaaS Furniture) governs which sections are safe to
33	cut or fold.
34
35	3. Hero discipline (nngroup visual-hierarchy, lawsofux, refactoringui):
36	headline < 10 words, subhead < 20 words, 1 primary CTA, real product/brand
37	visual (not a stock abstraction). This word-count floor is tighter than
38	`references/layout-discipline.md`'s hero hard numbers (≤ 2 lines, ≤ 4-element stack) —
39	both apply; the tighter one wins on conflict. CTAs stay ≤ 3 touchpoints on the whole
40	page, secondaries visually subordinate to the one primary. Von Restorff: exactly one
41	visually distinct focal element per viewport reads as memorable — see the Focal-Block
42	Floor (`layout-discipline.md` rule 9), mandatory in this register.
43
44	4. Break grid and padding sameness. Prefer asymmetric column splits (2/1, 1/2,
45	span-2, bento) over a uniform 3-column grid reused section after section. Vary section
46	padding for rhythm — tight groupings inside a section, generous separation between
47	sections — instead of one uniform value applied everywhere. `layout-discipline.md`
48	still owns the numeric caps (eyebrow restraint, zigzag cap, bento N=N, section-repetition
49	ban) once a skeleton is chosen; don't re-derive those here.
50
51	5. Anti-slop mechanical flags (lintable, check the rendered markup — sources:
52	sailop ai-slop research, superdesign):
53
54	\| Slop signal \| Mechanical flag \| Antidote \|
55	\|---\|---\|---\|
56	\| Canonical section order \| The 8-section skeleton above, used verbatim, in that order \| Step 2 — deviate \|
57	\| Uniform 3-col grid \| Same grid-cols-3 (or equivalent) reused across ≥3 unrelated sections \| Step 4 — asymmetric splits \|
58	\| Uniform section padding \| Identical `py-20`/`py-24` (or equivalent) on every section \| Step 4 — vary per section \|
59	\| Eyebrow over every H1 \| See `layout-discipline.md` Eyebrow Restraint (max 1 per 3 sections) \| Already governed there — don't restate \|
60	\| Signature entrance motion \| `opacity:0 + translateY(20px)` + `ease-in-out` scroll-reveal — found on ~83% of AI-generated pages \| Vary offset/easing/stagger — `design-motion/references/entrance-patterns.md` \|
61	\| Reflex palette+font+shape combo \| Tailwind blue/indigo (hue 200–290°) + Inter + `rounded-2xl` used

People who liked this also viewed

6 picks

Type