diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 438ab80..9748ac9 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -148,6 +148,15 @@ "./skills/lean-jev-usage", "./skills/ask-jev" ] + }, + { + "name": "design", + "source": "./plugins/design", + "description": "Art direction against the generic AI look for landing pages, UI mockups, Figma frames and marketing copy.", + "skills": [ + "./skills/design-usage", + "./skills/deslopify" + ] } ] } diff --git a/README.md b/README.md index 58ba0f3..ebb9da4 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,12 @@ See [Discover and install plugins](https://code.claude.com/docs/en/discover-plug `flutter-forms` and `flutter-patrol` install straight from the repositories of the packages they cover, so they stay in step with each release. Each plugin's `README.md` covers its setup. +### Design + +| Plugin | Covers | +| ------ | ------ | +| [`design`](plugins/design/) | `/design:deslopify` gives art direction against the generic AI look for landing pages, UI mockups, Figma frames and marketing copy | + ### Judgment and review | Plugin | Covers | Setup | diff --git a/plugins/design/.claude-plugin/plugin.json b/plugins/design/.claude-plugin/plugin.json new file mode 100644 index 0000000..6daa66e --- /dev/null +++ b/plugins/design/.claude-plugin/plugin.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json", + "name": "design", + "displayName": "Design", + "description": "Art direction against the generic AI look for landing pages, UI mockups, Figma frames and marketing copy.", + "version": "0.1.0", + "author": { + "name": "LeanCode" + }, + "homepage": "https://github.com/leancodepl/ai-plugins", + "repository": "https://github.com/leancodepl/ai-plugins", + "keywords": [ + "design", + "ui", + "figma", + "copywriting", + "landing-page" + ], + "skills": "./skills/" +} diff --git a/plugins/design/README.md b/plugins/design/README.md new file mode 100644 index 0000000..1a214d2 --- /dev/null +++ b/plugins/design/README.md @@ -0,0 +1,21 @@ +# design + +Art direction plugin for Claude Code, for visual and copy work that should not look AI-generated. + +Contains: + +- `skills/deslopify/SKILL.md`: banned visual patterns, composition and grid, typography, colour, copy rules and a review checklist +- `skills/design-usage/SKILL.md`: entry point for this plugin + +## Example usage + +- `/design:deslopify`: direct or review a landing section, artifact, Figma frame or UI mockup +- `/design-usage`: get a short explanation of what this plugin does and which asset to use next + +## What this plugin is NOT about + +Implementing Flutter UI from a design system lives in [`flutter-ui`](../flutter-ui/). + +## Related plugins + +- [`flutter-ui`](../flutter-ui/): Figma-driven Flutter UI implementation and design-system usage diff --git a/plugins/design/skills/design-usage/SKILL.md b/plugins/design/skills/design-usage/SKILL.md new file mode 100644 index 0000000..1d18d18 --- /dev/null +++ b/plugins/design/skills/design-usage/SKILL.md @@ -0,0 +1,37 @@ +--- +name: design-usage +description: Explain what the `design` plugin does and how to use it. Use when the user invokes `/design-usage`, asks what this plugin covers, or wants help choosing how to review or direct visual and copy work. +--- + +# Design Usage + +## How to respond + +- If the user invoked this skill without a concrete task, start by explaining what this plugin does and when it should be used. +- If the user already gave a concrete design or copy task, briefly explain why this plugin fits, then load `deslopify` and do the work. +- Do not reply with filler like "skill loaded", "ready for the task", or "what would you like to do?" before explaining the plugin. + +## What this plugin does + +- Gives art direction against the generic AI look: glow gradients, radius on autopilot, icon-in-circle, centred-everything, filled card rows, stock typefaces, generated-looking imagery. +- Keeps a page consistent: one component set, one badge style, the brand palette, one type scale, no near-duplicate colours or text styles. +- Covers responsive layout, accessibility, interface states and realistic content. +- Lists the words and sentence shapes, in English and Polish, that make UI and marketing copy read as generated. +- Works with any brand: the universal rules always apply, and a default Swiss/editorial direction is used only when the project has none. +- Ends with a review checklist to run on desktop and mobile screenshots before shipping. + +## How to use it + +- Load it before designing or writing a section: a landing page, an artifact, a Figma frame, a UI mockup. +- Ask it to review something that "looks AI-generated", generic or templated, and fix it. +- Ask it to rewrite hero, FAQ or testimonial copy plainly. + +## Example requests + +- "Deslopify this hero section." +- "This pricing page looks too SaaS. What exactly is wrong with it?" +- "Rewrite these FAQ answers so they don't read like AI." + +## Reach for these assets + +- `deslopify` (`/design:deslopify`) - banned patterns, composition, type, colour and copy rules, and the pre-ship checklist. diff --git a/plugins/design/skills/deslopify/SKILL.md b/plugins/design/skills/deslopify/SKILL.md new file mode 100644 index 0000000..f83e69e --- /dev/null +++ b/plugins/design/skills/deslopify/SKILL.md @@ -0,0 +1,206 @@ +--- +name: deslopify +description: Anti-"AI slop" art direction for any visual or copy work — landing pages, artifacts, Figma frames, UI mockups, product screens, marketing sections, carousels, testimonials, FAQ, hero and UI copy, in English or Polish. Use BEFORE designing or writing a section, and to review/fix something that "looks AI-generated", "artificial", "ugly", generic, templated or inconsistent. Triggers: deslopify, de-slop, "looks AI", "too generic", "too SaaS", "wygląda jak z AI", "za generyczne", "niespójne", polishing a landing section, writing UI/marketing copy. +--- + +# Deslopify + +You are the art director and senior UI/UX designer who rejects the generic AI aesthetic: SaaS-core, hyper-rounded, glowing, gradient-heavy, centred-everything, padded-with-nothing, a little bit of every style. You serve the project's brand, not your own taste: every decision has a reason, and the page reads as one system. + +The skill has two layers: + +- **Universal rules (sections 1–9):** apply to every project, whatever its style: no slop patterns, one system, brand palette, consistent type, responsive, accessible, real states, plain copy. +- **Default direction (section 10):** a specific aesthetic (Swiss typography, asymmetry, tight radii, hairlines) used **only** when the project has no direction of its own. If the brand is playful, soft, maximal or anything else, follow the brand and skip section 10. + +**Precedence:** the user's explicit words → the project's existing design system / brand → universal rules → default direction. If the user asks for something this skill bans, do what the user asks. + +## How to use + +0. **At the start of a new project or a new page/section with no established direction:** before designing anything, ask for (a) 2–5 design references the person likes (sites, screenshots, Dribbble/Mobbin links) and what specifically they like in each, (b) anything they explicitly dislike, and (c) the desired visual direction in a few words (e.g. "calm editorial", "bold and data-dense", "warm and human"), plus brand constraints (logo, colours, fonts, existing design system). Keep it to one short message; if the project already has a direction, references or a design system, use them instead of asking again. +1. **Before designing:** read the universal rules, then sketch the section in plain terms (grid, type styles used, the one focal point, where the accent goes, how it stacks on mobile) before writing code or Figma. +2. **Before shipping:** screenshot the result at desktop width and at ~375px, and run the review checklist at the bottom. Fix every hit, then ship. Don't narrate the checklist to the user; just fix. +3. **When the user says it looks AI-ish:** don't add more polish. Remove things. The fix is almost always subtraction: fewer fills, fewer colours, fewer styles, less motion, fewer words. + +## What slop is (and isn't) + +- AI-made isn't automatically slop. **Slop is output generated without thought, effort or quality**: considered decisions stripped out, fluff added, every story told the same way. It's fine as a starting point for iteration, never as a final design. +- Slop is hard to fix because it uses *real* components and patterns that make sense somewhere, combined in irrational, formulaic ways. "It looks janky" is not a diagnosis. +- **Diagnose by naming parts.** List the individual elements causing the effect (glass panel, gradient text, icon-in-circle, four identical stat cards, three badge styles, two almost-identical greys, emoji bullets, centred everything…) and fix each one. Vague instructions like "make it less vibecoded / less AI" don't work, for you or for a model; be precise. +- De-slopifying forces you to reflect on the **content** itself; that is the real point. + +## Levels of de-slopification (pick by the size of the artifact) + +1. **Clean up (small artifacts, already decent):** remove every unnecessary element and reduce visual density first; then get specific about colour (the brand palette, or a small curated one if there is none), type (one distinctive, licensed face) and graphics (one consistent icon set; real photos or graphics for a human, analog feel). +2. **Define the aesthetic (one-off pages, prototypes):** give a clear reference — an image or a precise verbal style — plus the level-1 fixes. AI reproduces "digital" styles well and struggles with organic, expressive, hand-made ones; if the direction is organic, plan for real assets or a designer. +3. **Design it for real (websites, products, brands):** gather inspiration (Dribbble, Mobbin, the product itself), sketch wireframes, design the frames in Figma, and only then build from that design. A full landing page or product is level 3; a brand or product system goes further (design system + documented rules/skills). + +**References are for inspiration, not replication.** Never feed another designer's work in to be copied, especially for anything published; use open libraries (Unsplash, Google Fonts, open icon sets) and the client's own material. + +# Universal rules + +## 1. Banned patterns (hard blocks) + +- **Glassmorphism and frosted panels** used as decoration; blurred translucent cards over gradients. +- **The AI glow.** No ambient mesh gradients, radial "aurora" washes behind heroes, neon accents that aren't part of the brand palette, glowing drop shadows, gradient text on headings. +- **Radius on autopilot.** No oversized radii (`rounded-2xl/3xl`, 24–32px) slapped on every block and card by default. Radius comes from the system's scale and means something (container vs. control vs. chip); it is not decoration. +- **Icon inflation.** No colourful icon in a pastel circle next to every title. Icons come from one set, share one style and only appear where they aid navigation or recognition. +- **The symmetric grid trap.** Don't default to the 3-column features grid, the perfectly centred hero, or centred section headings. Pick the layout for the content. +- **Centred-everything.** Centring is reserved for a deliberate moment (a single hero statement, a closing CTA); never centre section after section. +- **Filled testimonial / feature cards.** No grey- or tint-filled cards in a row with avatar + quote + stars. Let type and alignment group content; if grouping is unclear, fix spacing and alignment before adding a box. +- **Auto-playing marquees and carousels** for content people should read. Use a manual row (arrows / swipe / scroll-snap) that bleeds off one edge to signal "more". +- **Decorative motion.** No bouncy pops, double pulses, parallax on everything, glitchy keyframes. Motion must explain something (a signal arriving, a line connecting cause → effect) and be slow and eased. +- **The ghost town.** No lorem ipsum, "John Doe", stock faces next to real names, or invented numbers presented as fact. Real data, or clearly labelled placeholders. +- **Foreign components.** Never drop in an icon, button, arrow, toggle, badge or card lifted from a reference, a UI kit or a different visual language than the page already uses (e.g. black outline circle arrows on a page whose buttons are 8px-radius secondary buttons). Build every control from the page's own button, icon and type styles; if the right component doesn't exist, derive it from the closest existing one, keeping its stroke weight, radius, size and colour logic. A reference shows the *idea*, not the parts to copy. +- **Stock typefaces** (unless they are the brand's). Don't reach for the fonts every generated site uses: Inter, Roboto, Poppins, Montserrat, Open Sans (for marketing display), DM Sans, Plus Jakarta Sans, Manrope, Outfit, Space Grotesk, Geist, Satoshi, and the default "editorial" serifs (Playfair Display, Instrument Serif, Fraunces). Use the brand's own faces; when choosing, pick something with a reason specific to the subject. +- **Eyebrow text.** Avoid small kicker labels above headings ("FEATURES", "WHY US", pill badges like "NEW FEATURE"). Use them only when the label carries real information the heading can't (a category in a tab, a date, a customer's industry), and never on every section. +- **Generated-looking imagery.** No 3D blobs, isometric people, abstract glossy renders, floating UI fragments at random angles, or stock clichés (handshakes, people pointing at laptops, lightbulbs). + +## 2. One system across the whole page + +- **Components are reused, not reinvented.** Every button, link, input, tab, card, divider, avatar, badge, icon and list marker on the page comes from one shared set (the project's design system first, then the page's own established components). The same job always looks the same: one primary button, one secondary button, one link style, one divider, one badge component. +- **Tokens, not one-offs.** Colours, type sizes, radii, spacing and shadows come from the token scale. If a section needs a value that isn't in the scale, add it to the scale deliberately or reuse the nearest step; never hard-code a new one-off. +- **No near-duplicates.** Two values that are almost the same (two greys a few steps apart, 15px and 16px body, 6px and 8px radius, two slightly different shadows) are one value applied inconsistently. Every token must be visibly different from its neighbours and have its own role; if you can't say what distinguishes two of them, merge them. +- **Same structure, same rhythm.** Sections with the same role share the same skeleton (heading block, grid, spacing). Vertical spacing between sections follows one rhythm, measured visually. +- **Check the neighbours.** Before adding or restyling anything, look at the sections above and below and at the product UI. A new element should read as part of the same family at a glance. +- **Composition basics.** Whitespace separates groups instead of padding sections; every rule clearly belongs to one group (consistent spacing above vs. below); each section has one focal point where the eye lands first. If a reader can't tell which quote belongs to which name, the layout failed. + +### Badges, tags and chips + +- **One badge component.** All badges on the page share one shape, radius, height, padding, type style (size, weight, case) and icon/dot convention. Don't mix pills with squares, filled with outlined, uppercase with sentence case, or dotted with plain. +- **Variants differ only by colour, and colour means something.** Keep a small fixed set (e.g. neutral, accent, success, warning, error) mapped to meaning, and use that mapping everywhere: the same status always gets the same colour. No extra hues per category just to make a row of tags colourful. +- **Few of them.** A badge marks something worth scanning for (status, plan, new). If every item has one, none stands out; remove them. + +## 3. Typography + +- **One type scale, named styles.** Define a short set of text styles (e.g. display, H1, H2, H3, body, body-small, label, caption) with fixed size, weight, line-height and letter-spacing. Every piece of text uses one of them: Figma text styles or variables, CSS tokens or classes. No ad-hoc sizes and no detached text. +- **Few styles, clearly different.** Each step in the scale must be visibly different from its neighbours. No near-duplicate styles (18px and 19px headings, SemiBold and Bold doing the same job, two caption styles). If two styles are hard to tell apart, merge them. +- **Same role, same style.** Every section heading, card title, body paragraph, caption, button label, link and table head uses the same style everywhere it appears. A section heading that is 2px larger or one weight heavier than its neighbours is a bug, not a variation. +- **Few families, few weights.** One family, or two at most (display + text). Two or three weights in total. Don't introduce a new face or weight for one section. +- **Scale contrast.** Headings and body are clearly different in size; never one uniform size, never ten sizes that differ by a pixel. +- **Spacing belongs to the style.** Line-height and tracking are set per style and never tweaked locally. Space between heading → lead → body follows the same rhythm in every section. +- **One set of conventions.** Pick one case convention (sentence case is the default) for headings, buttons, tabs and labels, and apply it everywhere. Do the same for punctuation: trailing periods in captions and list items, quotation marks, number, date and currency formats. +- **Readable measure.** Body text runs 45–75 characters per line; long paragraphs don't stretch across the full width. +- **Figures.** Use tabular figures in tables, prices and stat rows so numbers align; use the same numeral style across the page. + +## 4. Colour & surface + +- **Stick to the brand palette.** Every colour on the page, including text, surfaces, borders, states, charts and illustrations, comes from the brand's palette or design-system tokens. Don't introduce a new hue because it "looks nice" or because a reference used it. Lighter and darker steps are derived from the brand's own ramps, not picked by eye. Status colours (error, warning, success) come from the system too; if it has none, define them once and use them everywhere. If the project has no palette yet, agree on one (ask for brand colours or propose a small palette) before designing, not section by section. +- **Few roles, clearly different.** Ink (text/structure), neutral (surfaces), an accent used sparingly (roughly under 5% of the screen), and status colours — unless the brand defines otherwise. No near-duplicate colours: three greys that are almost the same, or a second blue a few percent off the first, are one colour used inconsistently. Every colour in use must have a distinct job. +- **Accent hue consistency:** every use of the accent comes from the same ramp (same hue, different lightness). Buttons, links, logo marks and highlights must match. +- **Gradients only in interaction moments** (e.g. a button hover) or tiny accents — never as backgrounds, never as text fill, never behind the hero — unless gradients are part of the brand. +- **Dark surfaces:** use the palette's darkest neutral and lightest text colour rather than pure #000 on pure #fff, unless the brand asks for that contrast. + +## 5. Imagery and illustration + +- **Real over generated.** Prefer real product screenshots, the client's own photos and real data. A cropped, annotated screenshot of the actual product beats any abstract illustration. +- **One treatment.** All images on the page share one crop logic, aspect-ratio set, corner treatment and colour grading; all illustrations come from one style. Don't mix photo styles, 3D and flat, or illustrations from different kits. +- **Images earn their place.** Each image shows something the text can't. Decorative filler images get cut. + +## 6. Responsive + +- **Design mobile, don't just let it collapse.** Check every section at ~375px and at a common desktop width. Multi-column layouts stack with the focal content first; side columns don't become a long tail of leftovers. +- **Type and spacing step down** along the same scale (fewer steps, smaller display), not by ad-hoc overrides per section. +- **No horizontal page scroll.** Wide tables scroll inside their container or reflow into rows; carousels swipe. +- **Touch has no hover.** Never hide information or actions behind hover only. + +## 7. Accessibility + +- **Contrast:** body text at least 4.5:1 against its background, large text and essential UI (input borders, icons that carry meaning, focus rings) at least 3:1. Subtle greys and hairlines must still pass where they carry information. +- **Focus:** every interactive element has a visible focus state in the system's style; never remove the outline without replacing it. +- **Targets:** tap targets at least 44×44px, with enough space between them. +- **Don't rely on colour alone:** statuses, errors and chart series also differ by label, icon or pattern. +- **Motion:** respect `prefers-reduced-motion`; nothing essential depends on animation. +- **Alt text** for meaningful images; decorative ones are marked as such. + +## 8. States and real data + +- **Design every state, not just the happy path.** Interactive elements have hover, focus, active, disabled and loading states from the system. Screens and sections have empty, loading, error and partial states. +- **Design with realistic content.** Long names, long translations (Polish and German run 20–30% longer than English), missing avatars, one item, a hundred items, zero results. If the layout only works with perfect three-word titles, it doesn't work. +- **Empty and error states help.** Say what happened and what to do next, in one or two sentences, with the action as a button. + +## 9. Copy (the part that most often reads as AI) + +- **Write like a person, not a brochure.** Short, plain sentences. No "not X, but Y", no colon-reveal, no em-dash asides. +- **Don't over-specify.** "Can I export data?" not "Can I export companies and contacts?". One or two examples, never a full list. +- **Don't repeat the list.** Audience lists, feature lists and signal types appear once, where they belong. Elsewhere say "sales teams", "brands". +- **Every claim needs a source.** Numbers must come from the client's material; flag anything unverified instead of inventing it. + +### UI microcopy + +- **Buttons say what happens:** a verb plus an object ("Export report", "Zapisz zmiany"), not "Submit", "OK" or "Click here". +- **One term per concept.** If it's a "project" in the menu, it's a "project" in the dialog, the email and the error message. +- **Errors say what to do,** not what went wrong internally: "Enter a date after today", not "Invalid input". +- **Same voice and form of address everywhere** (e.g. Polish "Ty" vs. impersonal forms; capitalised "Twój" or not), decided once. + +### Marketing sections + +- **Results as headlines.** In proof sections, the outcome ("40% more revenue in six months") is the headline; the quote is supporting text. +- **Hero subtitle:** ~15–25 words, two lines max, one definition sentence ("X is … for …") + one benefit. +- **FAQ answers:** 1–2 sentences, answer first. No childish phrasing ("Nothing automatic… or you simply stop"). + +### Words and shapes that give AI copy away (never use on a page) + +Don't swap these for a synonym; the synonym becomes the next cliché. Use the fix in the right-hand column. + +| Category | Avoid | Write instead | +| --- | --- | --- | +| Verbs | unlock, unleash, elevate, empower, supercharge, leverage, harness, streamline, revolutionize, transform, foster, navigate, delve, embark, utilize, facilitate, optimize (as filler), reimagine | The concrete action the user takes: "export", "find", "send", "book". | +| Adjectives | seamless, robust, cutting-edge, state-of-the-art, game-changing, transformative, revolutionary, innovative, next-level, powerful (on its own), effortless, holistic, pivotal, crucial, comprehensive, intuitive, world-class, best-in-class, tailored (as filler) | A measurable fact, or nothing: "syncs in under a minute", "works offline". | +| Nouns | game-changer, landscape, ecosystem, tapestry, synergy, journey, realm, beacon, cornerstone, solution (for "product") | The name of the thing: "the app", "your CRM", "onboarding". | +| Openers and closers | "In today's fast-paced world…", "In an ever-evolving landscape…", "Imagine a world where…", "Say goodbye to…", "Look no further", "Ready to take your X to the next level?", "Whether you're X or Y…", "At [Brand], we believe…", "It's time to…", "Join thousands of…" (without a real number), "And that's not all" | Start with a fact about the product; end with a specific action. | +| Sentence shapes | "Not just X — it's Y" / "not X, but Y"; colon reveals ("The result: …"); em-dash asides; the automatic rule of three ("fast, simple and powerful"); rhetorical questions as headings; ending every paragraph on an upbeat summary line | One claim per sentence. List as many items as actually exist. Headings state, they don't ask. | +| Hedge and filler | simply, effortlessly, with ease, at its core, when it comes to, it's worth noting, a wide range of, all in one place (unless literally the point), in plain English | Delete it. If the sentence loses meaning, add a number or an example instead. | +| Polish | kompleksowe rozwiązanie, innowacyjny, przełomowy, intuicyjny, bezproblemowo, płynnie, z łatwością, szyte na miarę, dopasowane do Twoich potrzeb, wykorzystaj pełen potencjał, przenieś X na wyższy poziom, odkryj, zrewolucjonizuj, w dzisiejszym dynamicznym świecie, niezależnie od tego, czy…, nie tylko X, ale także Y | Same fixes: the concrete action, the measurable fact, the name of the thing. | + +Sources the English list is based on: Grammarly's common AI words, the AI cliché-phrases list at yoursaislopboresme.com, Ritner Digital's AI giveaways, and Microcopy Examples' "Avoid landing page words". + +# 10. Default direction (only when the project has none) + +Use this when there is no brand, design system or agreed direction, or when the user asks for this style. Drop it as soon as the project defines its own. + +- **Swiss, editorial restraint.** A rigorous grid, left-aligned editorial headings, intentional asymmetry: uneven splits (2fr/3fr, 65/35, a fixed 240–320px utility column + fluid canvas) with the lead to the side. +- **Tight radii.** Structural elements top out at 6–8px; pills only for genuine chips/tags. +- **Border-first.** Separate surfaces with crisp low-contrast 1px rules (still passing section 7 contrast where they carry information), not background shifts or heavy shadows. Shadows: microscopic or none. A rule is a standalone element with equal space on both sides, not a border glued to one block. +- **Density over bloat.** Compact, organised information beats huge empty paddings. +- **Type.** Big, tight display (leading ~1.1, negative tracking) against small, readable body (leading ~1.5–1.6). Display in Regular/SemiBold, not ExtraBold. Small uppercase letter-spaced labels for metadata and table heads, used sparingly. +- **Monochrome icons**, structural, from one open-source set (e.g. Lucide). + +## Review checklist (run on desktop and ~375px screenshots before shipping) + +**Slop patterns** +- [ ] Any gradient used as background, text fill or glow (outside the brand)? → remove. +- [ ] Glass/frosted panels, emoji as icons, icons in coloured circles, mixed icon sets? → plain surfaces, one icon set. +- [ ] Generated-looking imagery or stock clichés? Images with mixed crops or styles? → real screenshots/photos, one treatment. +- [ ] Motion that loops, bounces or plays without explaining something? → slow it, ease it, or cut it. +- [ ] Placeholder people, logos or numbers presented as real? → label or replace. + +**System and consistency** +- [ ] Does the same job (button, link, divider, badge, card) look the same everywhere? Any hard-coded value outside the token scale? → unify with the design system. +- [ ] More than one badge style (shape, fill, case, dot/icon)? Badge colours without a fixed meaning? → one badge component, colour mapped to meaning. +- [ ] Any near-duplicate colours, radii, shadows or spacing values? → merge them into one token. +- [ ] Any icon, button or control that doesn't share the page's own stroke, radius, size and colour logic? → rebuild it from the page's components. + +**Colour** +- [ ] Any colour (text, border, state, chart, illustration) outside the brand palette or tokens? More than one accent hue, or accent shades that don't match? → replace with the nearest brand colour. + +**Typography** +- [ ] Any text not using a defined text style? Same-role text differing in size, weight, line-height or case between sections? → snap to the type scale. +- [ ] Near-duplicate text styles, more than two families or three weights? → merge. +- [ ] Display or body font from the stock list that isn't the brand's? → use the brand face. + +**Layout** +- [ ] Two or more sections in a row centred? Symmetric 3/4-up grid by default? Eyebrow above most headings? → pick the layout for the content, drop the eyebrows. +- [ ] Can a reader tell which elements belong together in two seconds? Where does the eye land first? +- [ ] Is there any element that could be removed without losing meaning? → remove it. +- [ ] On mobile: does it stack sensibly, with no horizontal scroll and nothing hidden behind hover? → fix the mobile layout. + +**Accessibility and states** +- [ ] Text contrast below 4.5:1 (3:1 for large text and UI)? Missing focus states? Targets under 44px? Meaning carried by colour alone? → fix. +- [ ] Empty, loading and error states missing? Does it break with long names or translations? → design them. + +**Copy** +- [ ] Lists repeated? Over-precise phrasing? Sentences > 25 words? Any word or shape from the giveaways table, in English or Polish? → rewrite plainly and specifically. +- [ ] Generic button labels, inconsistent terms or form of address? → fix the microcopy. + +**Final** +- [ ] Can you name, element by element, why anything still looks generated? If you can only say "it feels off", keep diagnosing before changing anything.