[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C6EXFQ8YE5VA3VPDQZM4G6":3,"skill-same:01M6C6EXFQ8YE5VA3VPDQZM4G6":111},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":61,"linkOnly":62,"markdownContent":63,"markdownBody":64,"frontMatter":65,"refName":66,"commitSha":67,"skillDirectory":68,"forksCount":69,"repositoryHtmlUrl":70,"repositoryHomepageUrl":6,"ownerHtmlUrl":71,"ownerBlogUrl":72,"ownerDescription":73,"updatedAt":74,"install":75,"resources":88},"01M6C6EXFQ8YE5VA3VPDQZM4G6","visual-design",null,"Make web and app UI look deliberate and finished instead of templated. Covers choosing an aesthetic direction before writing code, type scale and font pairing, a spacing system, colour as tokens with dark mode, layout and hierarchy, detail density, imagery, empty\u002Floading\u002Ferror states, contrast, and phone-width layout, then a screenshot review loop (desktop + phone, light + dark) where you critique the render and fix the three worst problems. Use when building or redesigning a page, landing page, marketing site, dashboard, settings screen or component styling, or when asked to \"make it look better\", \"polish this\", \"make it premium\u002Fmodern\u002Fcleaner\", or \"it looks generic\". Respects an existing design system when the project has one.","Allternit\u002Fallternit-platform","Allternit","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F250397232?v=4","01M6C67T2SPVP033M7REAAHYHX","01M6C67T7CXM1DKVQY8DFAFRB2",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Fcmd\u002Fgizzi-code\u002Fsrc\u002Fruntime\u002Fskills\u002Fbundled\u002Fcraft\u002Fvisual-design\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60],"design","visual design","visual","render","aesthetic","project","app","direction","error","landing","states","loading","you","spacing system","mode","hierarchy","when","use","fix","settings","page","site","system","polish","loop","critique","code","desktop","component","web","dashboard","review","writing","2026-11-10 10:12:30",false,"---\nname: visual-design\ndescription: Make web and app UI look deliberate and finished instead of templated. Covers choosing an aesthetic direction before writing code, type scale and font pairing, a spacing system, colour as tokens with dark mode, layout and hierarchy, detail density, imagery, empty\u002Floading\u002Ferror states, contrast, and phone-width layout, then a screenshot review loop (desktop + phone, light + dark) where you critique the render and fix the three worst problems. Use when building or redesigning a page, landing page, marketing site, dashboard, settings screen or component styling, or when asked to \"make it look better\", \"polish this\", \"make it premium\u002Fmodern\u002Fcleaner\", or \"it looks generic\". Respects an existing design system when the project has one.\n---\n\n# Visual design\n\nThe goal is a page that looks like someone made decisions. Generic output comes from skipping decisions: default font, default grey, everything centred, equal spacing everywhere, a gradient blob for a hero. This skill forces the decisions early, then checks them with your eyes on a real render.\n\nWork in this order: **read what exists → pick a direction → set tokens → lay out → fill states → screenshot → critique → fix → repeat.**\n\n## 0. Read what already exists\n\nBefore inventing anything, look for a design system and obey it.\n\n- Search for tokens: `tailwind.config.*`, `theme.ts`, `tokens.json`, CSS files with `:root {` custom properties, `@theme` blocks, a `components\u002Fui\u002F` folder, Storybook.\n- Note the existing font families, colour variables, radius, spacing scale and component primitives (Button, Card, Input).\n- If they exist, **use them**. Your job shrinks to composition, hierarchy and states. Do not add a second palette, a new font, or one-off hex values beside the system. If a token you need is missing, add it to the system in the same style rather than hard-coding it.\n- If the user asked for a redesign of the system itself, say which tokens you are changing and why.\n\nOnly when nothing exists do you pick everything below from scratch.\n\n## 1. Pick a direction before code\n\nWrite down, in two or three lines, before touching markup:\n\n- **Who it is for and what one thing they should do or feel.** (\"Ops engineers scanning for failures. Find the red row in two seconds.\")\n- **A direction in a few concrete words**, drawn from a real-world reference rather than \"modern and clean\". Examples: \"printed train timetable: dense, monospaced numerals, hairline rules\"; \"museum wall label: lots of air, one serif, small caps captions\"; \"field equipment: high contrast, chunky controls, safety-orange accent\"; \"newspaper weekend section: big serif headline, columns, pull quotes\".\n- **One signature element** the page will be remembered by: an unusual headline treatment, a strong grid, a single bold colour field, a distinctive illustration style, data shown as the hero. One, not five.\n\nThen let the direction decide the details. Dense tool → small type, tight spacing, rules instead of cards. Editorial → large type, generous measure, few colours. If the direction does not change any default, it is not a direction.\n\nAvoid the template tells unless the direction truly calls for them: purple-to-blue gradients, glassmorphism cards on a blurred blob, three identical feature cards with icons in circles, centred everything, emoji as icons, stock \"people at laptops\" photos, shadows on every box.\n\n## 2. Type\n\nType does most of the work. Get it right and a plain layout looks designed.\n\n- **Scale:** pick a ratio and derive sizes, don't eyeball each one. Dense UI: ratio ~1.125–1.2 from a 14–15px base. Content\u002Fmarketing: ~1.25–1.333 from 16–18px. Display headlines can jump well beyond the scale; that jump is often the signature.\n- **Fluid sizes** for headlines: `font-size: clamp(2.25rem, 1.2rem + 4vw, 4.5rem)`. Body text stays fixed (16px minimum on phones, so iOS does not zoom inputs).\n- **Pairing:** at most two families. Either one family in several weights (safest), or a characterful display face + a quiet text face. Contrast the pair on one axis (serif vs sans, geometric vs humanist), not all of them. Monospace is a valid third only for code or numerals.\n- **Line length:** 45–75 characters for reading text (`max-width: 65ch`). Line height ~1.5 for body, 1.0–1.15 for big headlines. Tighten letter-spacing slightly on large display sizes (−0.01 to −0.03em); loosen on small caps and tiny labels (+0.04 to +0.08em).\n- **Numbers:** use `font-variant-numeric: tabular-nums` in tables, prices and counters so columns align.\n- **Hierarchy with fewer levers:** usually size + weight + colour is enough. If you need underline, caps, italic and a colour to distinguish a heading, the scale is wrong.\n- Load fonts with `font-display: swap` and give a fallback stack with similar metrics. Self-host or use the project's existing font pipeline.\n\n## 3. Spacing and layout\n\n- **One spacing scale**, e.g. 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 (px or rem), exposed as tokens. Every margin, padding and gap comes from it.\n- **Proximity carries meaning:** space inside a group is smaller than space between groups. A common failure is uniform 24px everywhere, which makes nothing belong to anything. Aim for at least a 2x jump between related and unrelated.\n- **Grid:** decide a content width (e.g. 1120–1280px for apps, 65ch for reading) and a column structure. Align edges to it. Asymmetry is fine and often better than centring; misalignment by a few pixels is not.\n- **Hierarchy:** squint at the screenshot. There should be one obvious first thing, a clear second, and then the rest. If three things shout, demote two.\n- **Containers:** not everything needs a card. Group with space, a hairline rule, or a background tint first; use borders or shadows only when an element floats or is interactive.\n- **Radius:** pick one or two values and use them consistently. Nested radii: inner = outer − padding.\n\n## 4. Colour as tokens, with dark mode\n\nDefine semantic tokens, never sprinkle raw hex in components:\n\n```css\n:root {\n  --bg: #f7f6f3;        --surface: #ffffff;   --surface-2: #efeee9;\n  --text: #1b1b1f;      --text-muted: #5e5e66; --border: #dcdad3;\n  --accent: #c2410c;    --accent-text: #ffffff;\n  --ok: #15803d; --warn: #a16207; --danger: #b91c1c;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) {\n    --bg: #111113; --surface: #1a1a1d; --surface-2: #232327;\n    --text: #ececef; --text-muted: #a0a0a8; --border: #2e2e33;\n    --accent: #fb923c; --accent-text: #1b1b1f;\n  }\n}\n:root[data-theme=\"dark\"] { \u002F* same dark values, for a manual toggle *\u002F }\nbody { background: var(--bg); color: var(--text); }\n```\n\n- **Mostly neutrals, one accent.** The accent marks what is actionable or important. If it is everywhere, it marks nothing. Status colours are for status only.\n- **Tinted neutrals** (a hint of warm or cool) look more considered than pure grey; keep the tint consistent across the ramp.\n- **Dark mode is its own palette**, not an inversion: lift surfaces by lightness instead of shadows, desaturate and lighten the accent a little, avoid pure black backgrounds and pure white text on large areas.\n- **Contrast:** body text ≥ 4.5:1 against its background, large text (≥24px, or ≥19px bold) and UI component edges ≥ 3:1. Check muted text and placeholder text specifically, they fail most often. Check both themes.\n\n## 5. Detail density and imagery\n\nFinished pages have small, consistent details; templated ones have big generic ones.\n\n- **Details that read as care:** consistent icon set and stroke width; focus rings that match the accent; hover and pressed states; hairline dividers aligned to the grid; real-looking sample data (names, dates, amounts) instead of \"Lorem ipsum\" and \"John Doe\"; aligned numerals; sentence-case labels.\n- **Imagery:** choose one treatment and keep it: product screenshots in a consistent frame, a single illustration style, abstract shapes built from the palette, or photography with a consistent crop and grade. If you have no real imagery, prefer typography and layout over placeholder stock. Generated SVG patterns or simple geometric compositions in the token colours are a good fallback. Always set `width`\u002F`height` or `aspect-ratio` so images do not shift layout, and write real `alt` text.\n- **Icons** support labels; they rarely replace them. Icon-only buttons need `aria-label`.\n\n## 6. States are part of the design\n\nDesign these with the same care as the happy path, and check each in a screenshot:\n\n- **Empty:** says what this area is for and offers the first action. Not just \"No data\".\n- **Loading:** skeletons shaped like the real content for layout-heavy areas; a small inline spinner or progress text for quick actions. Never a layout jump when content arrives.\n- **Error:** says what happened in plain words, what the user can do, and keeps their input. Use the danger colour sparingly (icon + text), not a full red page.\n- **Long and short content:** a 3-character name and a 60-character name, one row and 500 rows, a missing avatar.\n- **Interactive states:** hover, focus-visible, active, disabled, selected. Disabled still needs readable text (≥ 3:1 is a reasonable floor for legibility even though WCAG exempts it).\n\nTo screenshot a state, add a temporary query flag or story that forces it, or point the script at a static fixture.\n\n## 7. Phone width\n\n- Design at 390px wide as a first-class layout, not a squeezed desktop. Minimum side gutter 16px.\n- No horizontal page scroll. Tables either scroll inside their own container or collapse into stacked rows. Long words and URLs get `overflow-wrap: anywhere`.\n- Touch targets ≥ 44×44px. Primary actions within thumb reach; sticky bottom bars are fine for one main action.\n- Navigation collapses deliberately (a menu, a tab bar, or a short horizontal scroller), not by wrapping into three lines.\n- Respect safe areas: `padding-bottom: env(safe-area-inset-bottom)` on fixed bottom bars.\n\n## 8. The review loop (do not skip)\n\nYou cannot judge a design from the code. Render it and look.\n\n**Capture.** With the page running (dev server URL or a local HTML file):\n\n```bash\nnode ${SKILL_DIR}\u002Fscripts\u002Fshot.mjs --url http:\u002F\u002Flocalhost:3000 --sheet --dark --out \u002Ftmp\u002Freview\u002Fsheet.png\nnode ${SKILL_DIR}\u002Fscripts\u002Fshot.mjs --url http:\u002F\u002Flocalhost:3000 --out \u002Ftmp\u002Freview\u002Fdesktop.png          # 1440x900\nnode ${SKILL_DIR}\u002Fscripts\u002Fshot.mjs --url http:\u002F\u002Flocalhost:3000 --phone --out \u002Ftmp\u002Freview\u002Fphone.png    # 390x844 @2x\nnode ${SKILL_DIR}\u002Fscripts\u002Fshot.mjs --url .\u002Findex.html --full --w 1280 --h 800 --out \u002Ftmp\u002Freview\u002Ffull.png\n```\n\n`--sheet` puts desktop and phone side by side (light row, plus a dark row with `--dark`). The desktop cell is scaled down, so judge text size from the single desktop shot. The script uses the installed Chrome (or `$CHROME`), installs `playwright-core` into a cache on first run, and prints page errors, failed requests and **horizontal overflow** with the offending elements. Treat any of those as a bug to fix first.\n\n**Look at the image** (open the PNG with your file\u002Fimage reading tool). Then critique it like an art director, out loud, against this list:\n\n1. Where does the eye land first? Is that the right thing?\n2. Does it match the direction you wrote down, or has it drifted back to defaults?\n3. Spacing: are groups obvious? Anything cramped, anything floating?\n4. Type: too many sizes or weights? Line lengths too long? Headline wrapping badly (one orphan word)?\n5. Alignment: edges that almost line up but do not.\n6. Colour: accent overused? Muted text too faint? Dark mode muddy or glaring?\n7. Phone: anything clipped, overflowing, too small to tap, or a desktop layout merely shrunk?\n8. Does anything look like a placeholder (fake text, grey boxes, broken images)?\n\n**Fix the three worst issues**, biggest visual impact first, then capture again and compare. Repeat until a fresh critique finds nothing worse than nitpicks, usually two to four rounds. Say what you changed each round in one line.\n\nReport to the user with the final screenshots' paths, not just \"done\".\n\n## Quick checklist before you finish\n\n- [ ] Existing tokens\u002Fcomponents used; no stray hex values or one-off fonts\n- [ ] Direction written down and visible in the result\n- [ ] One type scale, ≤ 2 families, readable line length\n- [ ] One spacing scale; groups distinguishable\n- [ ] Light and dark both checked; contrast ≥ 4.5:1 for text\n- [ ] Empty, loading and error states designed and screenshotted\n- [ ] Phone 390px: no overflow, 44px targets, 16px gutters\n- [ ] Focus-visible styles present; reduced motion respected for any animation\n- [ ] Final screenshots reviewed and paths reported\n","# Visual design\n\nThe goal is a page that looks like someone made decisions. Generic output comes from skipping decisions: default font, default grey, everything centred, equal spacing everywhere, a gradient blob for a hero. This skill forces the decisions early, then checks them with your eyes on a real render.\n\nWork in this order: **read what exists → pick a direction → set tokens → lay out → fill states → screenshot → critique → fix → repeat.**\n\n## 0. Read what already exists\n\nBefore inventing anything, look for a design system and obey it.\n\n- Search for tokens: `tailwind.config.*`, `theme.ts`, `tokens.json`, CSS files with `:root {` custom properties, `@theme` blocks, a `components\u002Fui\u002F` folder, Storybook.\n- Note the existing font families, colour variables, radius, spacing scale and component primitives (Button, Card, Input).\n- If they exist, **use them**. Your job shrinks to composition, hierarchy and states. Do not add a second palette, a new font, or one-off hex values beside the system. If a token you need is missing, add it to the system in the same style rather than hard-coding it.\n- If the user asked for a redesign of the system itself, say which tokens you are changing and why.\n\nOnly when nothing exists do you pick everything below from scratch.\n\n## 1. Pick a direction before code\n\nWrite down, in two or three lines, before touching markup:\n\n- **Who it is for and what one thing they should do or feel.** (\"Ops engineers scanning for failures. Find the red row in two seconds.\")\n- **A direction in a few concrete words**, drawn from a real-world reference rather than \"modern and clean\". Examples: \"printed train timetable: dense, monospaced numerals, hairline rules\"; \"museum wall label: lots of air, one serif, small caps captions\"; \"field equipment: high contrast, chunky controls, safety-orange accent\"; \"newspaper weekend section: big serif headline, columns, pull quotes\".\n- **One signature element** the page will be remembered by: an unusual headline treatment, a strong grid, a single bold colour field, a distinctive illustration style, data shown as the hero. One, not five.\n\nThen let the direction decide the details. Dense tool → small type, tight spacing, rules instead of cards. Editorial → large type, generous measure, few colours. If the direction does not change any default, it is not a direction.\n\nAvoid the template tells unless the direction truly calls for them: purple-to-blue gradients, glassmorphism cards on a blurred blob, three identical feature cards with icons in circles, centred everything, emoji as icons, stock \"people at laptops\" photos, shadows on every box.\n\n## 2. Type\n\nType does most of the work. Get it right and a plain layout looks designed.\n\n- **Scale:** pick a ratio and derive sizes, don't eyeball each one. Dense UI: ratio ~1.125–1.2 from a 14–15px base. Content\u002Fmarketing: ~1.25–1.333 from 16–18px. Display headlines can jump well beyond the scale; that jump is often the signature.\n- **Fluid sizes** for headlines: `font-size: clamp(2.25rem, 1.2rem + 4vw, 4.5rem)`. Body text stays fixed (16px minimum on phones, so iOS does not zoom inputs).\n- **Pairing:** at most two families. Either one family in several weights (safest), or a characterful display face + a quiet text face. Contrast the pair on one axis (serif vs sans, geometric vs humanist), not all of them. Monospace is a valid third only for code or numerals.\n- **Line length:** 45–75 characters for reading text (`max-width: 65ch`). Line height ~1.5 for body, 1.0–1.15 for big headlines. Tighten letter-spacing slightly on large display sizes (−0.01 to −0.03em); loosen on small caps and tiny labels (+0.04 to +0.08em).\n- **Numbers:** use `font-variant-numeric: tabular-nums` in tables, prices and counters so columns align.\n- **Hierarchy with fewer levers:** usually size + weight + colour is enough. If you need underline, caps, italic and a colour to distinguish a heading, the scale is wrong.\n- Load fonts with `font-display: swap` and give a fallback stack with similar metrics. Self-host or use the project's existing font pipeline.\n\n## 3. Spacing and layout\n\n- **One spacing scale**, e.g. 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 (px or rem), exposed as tokens. Every margin, padding and gap comes from it.\n- **Proximity carries meaning:** space inside a group is smaller than space between groups. A common failure is uniform 24px everywhere, which makes nothing belong to anything. Aim for at least a 2x jump between related and unrelated.\n- **Grid:** decide a content width (e.g. 1120–1280px for apps, 65ch for reading) and a column structure. Align edges to it. Asymmetry is fine and often better than centring; misalignment by a few pixels is not.\n- **Hierarchy:** squint at the screenshot. There should be one obvious first thing, a clear second, and then the rest. If three things shout, demote two.\n- **Containers:** not everything needs a card. Group with space, a hairline rule, or a background tint first; use borders or shadows only when an element floats or is interactive.\n- **Radius:** pick one or two values and use them consistently. Nested radii: inner = outer − padding.\n\n## 4. Colour as tokens, with dark mode\n\nDefine semantic tokens, never sprinkle raw hex in components:\n\n```css\n:root {\n  --bg: #f7f6f3;        --surface: #ffffff;   --surface-2: #efeee9;\n  --text: #1b1b1f;      --text-muted: #5e5e66; --border: #dcdad3;\n  --accent: #c2410c;    --accent-text: #ffffff;\n  --ok: #15803d; --warn: #a16207; --danger: #b91c1c;\n}\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) {\n    --bg: #111113; --surface: #1a1a1d; --surface-2: #232327;\n    --text: #ececef; --text-muted: #a0a0a8; --border: #2e2e33;\n    --accent: #fb923c; --accent-text: #1b1b1f;\n  }\n}\n:root[data-theme=\"dark\"] { \u002F* same dark values, for a manual toggle *\u002F }\nbody { background: var(--bg); color: var(--text); }\n```\n\n- **Mostly neutrals, one accent.** The accent marks what is actionable or important. If it is everywhere, it marks nothing. Status colours are for status only.\n- **Tinted neutrals** (a hint of warm or cool) look more considered than pure grey; keep the tint consistent across the ramp.\n- **Dark mode is its own palette**, not an inversion: lift surfaces by lightness instead of shadows, desaturate and lighten the accent a little, avoid pure black backgrounds and pure white text on large areas.\n- **Contrast:** body text ≥ 4.5:1 against its background, large text (≥24px, or ≥19px bold) and UI component edges ≥ 3:1. Check muted text and placeholder text specifically, they fail most often. Check both themes.\n\n## 5. Detail density and imagery\n\nFinished pages have small, consistent details; templated ones have big generic ones.\n\n- **Details that read as care:** consistent icon set and stroke width; focus rings that match the accent; hover and pressed states; hairline dividers aligned to the grid; real-looking sample data (names, dates, amounts) instead of \"Lorem ipsum\" and \"John Doe\"; aligned numerals; sentence-case labels.\n- **Imagery:** choose one treatment and keep it: product screenshots in a consistent frame, a single illustration style, abstract shapes built from the palette, or photography with a consistent crop and grade. If you have no real imagery, prefer typography and layout over placeholder stock. Generated SVG patterns or simple geometric compositions in the token colours are a good fallback. Always set `width`\u002F`height` or `aspect-ratio` so images do not shift layout, and write real `alt` text.\n- **Icons** support labels; they rarely replace them. Icon-only buttons need `aria-label`.\n\n## 6. States are part of the design\n\nDesign these with the same care as the happy path, and check each in a screenshot:\n\n- **Empty:** says what this area is for and offers the first action. Not just \"No data\".\n- **Loading:** skeletons shaped like the real content for layout-heavy areas; a small inline spinner or progress text for quick actions. Never a layout jump when content arrives.\n- **Error:** says what happened in plain words, what the user can do, and keeps their input. Use the danger colour sparingly (icon + text), not a full red page.\n- **Long and short content:** a 3-character name and a 60-character name, one row and 500 rows, a missing avatar.\n- **Interactive states:** hover, focus-visible, active, disabled, selected. Disabled still needs readable text (≥ 3:1 is a reasonable floor for legibility even though WCAG exempts it).\n\nTo screenshot a state, add a temporary query flag or story that forces it, or point the script at a static fixture.\n\n## 7. Phone width\n\n- Design at 390px wide as a first-class layout, not a squeezed desktop. Minimum side gutter 16px.\n- No horizontal page scroll. Tables either scroll inside their own container or collapse into stacked rows. Long words and URLs get `overflow-wrap: anywhere`.\n- Touch targets ≥ 44×44px. Primary actions within thumb reach; sticky bottom bars are fine for one main action.\n- Navigation collapses deliberately (a menu, a tab bar, or a short horizontal scroller), not by wrapping into three lines.\n- Respect safe areas: `padding-bottom: env(safe-area-inset-bottom)` on fixed bottom bars.\n\n## 8. The review loop (do not skip)\n\nYou cannot judge a design from the code. Render it and look.\n\n**Capture.** With the page running (dev server URL or a local HTML file):\n\n```bash\nnode ${SKILL_DIR}\u002Fscripts\u002Fshot.mjs --url http:\u002F\u002Flocalhost:3000 --sheet --dark --out \u002Ftmp\u002Freview\u002Fsheet.png\nnode ${SKILL_DIR}\u002Fscripts\u002Fshot.mjs --url http:\u002F\u002Flocalhost:3000 --out \u002Ftmp\u002Freview\u002Fdesktop.png          # 1440x900\nnode ${SKILL_DIR}\u002Fscripts\u002Fshot.mjs --url http:\u002F\u002Flocalhost:3000 --phone --out \u002Ftmp\u002Freview\u002Fphone.png    # 390x844 @2x\nnode ${SKILL_DIR}\u002Fscripts\u002Fshot.mjs --url .\u002Findex.html --full --w 1280 --h 800 --out \u002Ftmp\u002Freview\u002Ffull.png\n```\n\n`--sheet` puts desktop and phone side by side (light row, plus a dark row with `--dark`). The desktop cell is scaled down, so judge text size from the single desktop shot. The script uses the installed Chrome (or `$CHROME`), installs `playwright-core` into a cache on first run, and prints page errors, failed requests and **horizontal overflow** with the offending elements. Treat any of those as a bug to fix first.\n\n**Look at the image** (open the PNG with your file\u002Fimage reading tool). Then critique it like an art director, out loud, against this list:\n\n1. Where does the eye land first? Is that the right thing?\n2. Does it match the direction you wrote down, or has it drifted back to defaults?\n3. Spacing: are groups obvious? Anything cramped, anything floating?\n4. Type: too many sizes or weights? Line lengths too long? Headline wrapping badly (one orphan word)?\n5. Alignment: edges that almost line up but do not.\n6. Colour: accent overused? Muted text too faint? Dark mode muddy or glaring?\n7. Phone: anything clipped, overflowing, too small to tap, or a desktop layout merely shrunk?\n8. Does anything look like a placeholder (fake text, grey boxes, broken images)?\n\n**Fix the three worst issues**, biggest visual impact first, then capture again and compare. Repeat until a fresh critique finds nothing worse than nitpicks, usually two to four rounds. Say what you changed each round in one line.\n\nReport to the user with the final screenshots' paths, not just \"done\".\n\n## Quick checklist before you finish\n\n- [ ] Existing tokens\u002Fcomponents used; no stray hex values or one-off fonts\n- [ ] Direction written down and visible in the result\n- [ ] One type scale, ≤ 2 families, readable line length\n- [ ] One spacing scale; groups distinguishable\n- [ ] Light and dark both checked; contrast ≥ 4.5:1 for text\n- [ ] Empty, loading and error states designed and screenshotted\n- [ ] Phone 390px: no overflow, 44px targets, 16px gutters\n- [ ] Focus-visible styles present; reduced motion respected for any animation\n- [ ] Final screenshots reviewed and paths reported\n",{"name":5,"description":7},"main","7db7c6f88fb96b6792195dacabdb088419b7a9fa","cmd\u002Fgizzi-code\u002Fsrc\u002Fruntime\u002Fskills\u002Fbundled\u002Fcraft\u002Fvisual-design",0,"https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform","https:\u002F\u002Fgithub.com\u002FAllternit","https:\u002F\u002Fallternit.com","Allternit builds AI agents that work on your computer, in the cloud, and from your phone. Home of Allternit Desktop and Gizzi Code.","2026-11-12 03:40:39",{"source":8,"skillName":5,"commands":76,"prompt":86,"zipAvailable":87},[77,80,83],{"tool":78,"command":79},"npx","npx skills add Allternit\u002Fallternit-platform --skill visual-design",{"tool":81,"command":82},"bunx","bunx skills add Allternit\u002Fallternit-platform --skill visual-design",{"tool":84,"command":85},"pnpm","pnpm dlx skills add Allternit\u002Fallternit-platform --skill visual-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Fcmd\u002Fgizzi-code\u002Fsrc\u002Fruntime\u002Fskills\u002Fbundled\u002Fcraft\u002Fvisual-design\u002FSKILL.md",true,[89,95,101,105],{"path":90,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":93,"sourceHtmlUrl":94},".gitignore","OTHER","其他",30,"https:\u002F\u002Fgithub.com\u002Fjthorare\u002Fagentic-workflow\u002Fblob\u002Fmain\u002Fskills\u002FbugFixOrchestrator\u002F.gitignore",{"path":96,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":99,"sourceHtmlUrl":100},"block.yaml","REFERENCE","参考文档",623,"https:\u002F\u002Fgithub.com\u002Fjthorare\u002Fagentic-workflow\u002Fblob\u002Fmain\u002Fskills\u002FbugFixOrchestrator\u002Fblock.yaml",{"path":102,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":103,"sourceHtmlUrl":104},"requires.yaml",109,"https:\u002F\u002Fgithub.com\u002Fjthorare\u002Fagentic-workflow\u002Fblob\u002Fmain\u002Fskills\u002FbugFixOrchestrator\u002Frequires.yaml",{"path":106,"resourceType":107,"resourceTypeDesc":108,"sizeBytes":109,"sourceHtmlUrl":110},"scripts\u002Fshot.mjs","SCRIPT","脚本",7239,"https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Fcmd\u002Fgizzi-code\u002Fsrc\u002Fruntime\u002Fskills\u002Fbundled\u002Fcraft\u002Fvisual-design\u002Fscripts\u002Fshot.mjs",[112,135,154,177,199,228],{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":61},"01M6C6GBWRCJNWQP5S16PKXB77","jev","Ask typed System One judgments (noul \u002F choice \u002F score) against Allternit's LOCAL System One server instead of prompting a chat model to \"return JSON\". Use when classifying, routing, scoring, or screening something and code needs a probability it can branch on, or when the user runs \u002Fjev. Official TypeSafe Jev is an optional, explicit remote lane.","https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Ftools\u002Fsystem-one-local\u002Fskills\u002Fjev\u002FSKILL.md",[],[114,119,120,54,121,122,50,123,124,125,126,127,128,45,129,130,131,132,133,134,44],"official","routing","server","lane","json","model","choice","branch","ask","user","scoring","chat","local","probability","remote","can",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":61},"01M6C6G9CGB9MX47NSQ31QNNB7","jev-route","Route with local System One answers — map Choice + confidence to act \u002F confirm \u002F human lanes, or pick a model tier by Choice label. Also documents the separate `route-model` helper for OpenRouter's typesafe\u002Fjev-router (a chat-model router, NOT System One). Use for confidence routing, model-tier routing, or when the user runs \u002Fjev-route.","https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Ftools\u002Fsystem-one-local\u002Fskills\u002Fjev-route\u002FSKILL.md",[],[114,142,143,144,120,50,124,145,125,146,128,45,147,148,130,149,131,150,151,152,153,44],"jev route","route","documents","pick","openrouter","router","model router","map","helper","with","for","model-tier",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":160,"publishedAt":61},"01M6C6G6JZE0RC50QWWE6HG320","jev-guardrail","Screen text or agent tool calls with a battery of local System One Noul hazards plus a Score, with policy in code — and the Claude Code PreToolUse guard (hooks\u002Fpretooluse-guard) that puts deterministic hard rules first and lets Jev only raise friction. Use for injection\u002Fsecret\u002Fdestructive-action screening or when the user runs \u002Fjev-guardrail.","https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Ftools\u002Fsystem-one-local\u002Fskills\u002Fjev-guardrail\u002FSKILL.md",[],[114,161,162,163,54,164,165,166,50,167,168,169,128,45,170,171,172,173,131,174,175,152,176,44],"jev guardrail","guardrail","policy","injection","first","guard","tool","text","Rules","friction","only","hooks","deterministic","battery","calls","agent tool",{"skillNo":178,"name":179,"nameZh":6,"description":180,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":181,"categories":182,"keywords":186,"publishedAt":61},"01M6C6G426P7Q5J3F98HVYDCB2","jev-fanout","Ask every independent System One question over the same state in ONE POST \u002Fv1\u002Fsystemone to the local server (speculative fan-out). Use for parallel judgments, compound commands, one-call turn assessment, or when the user runs \u002Fjev-fanout. Do not fire one HTTP call per question.","https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Ftools\u002Fsystem-one-local\u002Fskills\u002Fjev-fanout\u002FSKILL.md",[183],{"categoryNo":184,"categoryName":185,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",[114,187,188,189,190,191,121,50,192,127,193,128,45,194,195,131,196,197,152,198,44],"fanout","jev fanout","http","assessment","state","parallel","question","do","call","post","v1","local server",{"skillNo":200,"name":201,"nameZh":6,"description":202,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":203,"categories":204,"keywords":205,"publishedAt":61},"01M6C6G13D7JK869Q3DHMQ9542","memory-drive","Read and write the user's Allternit Memory Drive, a git repo of markdown memories in the open Agent Memory Repo format. Use at the start of a session to load what the user's agents remember (MEMORY.md), when the user says \"remember this\", when you learn a durable fact about the user or their work, and before answering questions that depend on past sessions.","https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Ftools\u002Fmemory-drive-plugin\u002Fskills\u002Fmemory-drive\u002FSKILL.md",[],[206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,128,222,45,223,224,225,226,40,227,44],"memory","drive","memory drive","sessions","remember","learn","git","agent memory","start","open","markdown","format","work","repo","read","write","session","what the","memories","about","questions","load",{"skillNo":229,"name":230,"nameZh":6,"description":231,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":232,"categories":233,"keywords":237,"publishedAt":61},"01M6C6FX778N1047QAJ39Y582H","agent-orchestrator","Orchestrate external CLI agents (kimi, codex, agy, claude, grok, gizzi) through the Allternit Factory (gizzi agents \u002F orchestration \u002F workspace \u002F workflows). Use when the user asks to delegate, offload, or farm out implementation work to another CLI agent \u002F terminal session, or to run work outside this session to save tokens. Part of Allternit Agents \u002F Bot Agents — not a separate product.","https:\u002F\u002Fgithub.com\u002FAllternit\u002Fallternit-platform\u002Fblob\u002Fmain\u002Ftools\u002Fagent-orchestrator\u002FSKILL.md",[234],{"categoryNo":235,"categoryName":236,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[238,239,240,241,242,243,244,245,246,247,248,249,250,218,251,252,222,45,253,254,255,256,257,258,259,260,44],"orchestrator","agent orchestrator","bot","cli","terminal","codex","orchestration","workflows","run","product","orchestrate","save","workspace","delegate","factory","grok","kimi","implementation","offload","tokens","cli agents","farm","terminal session"]