--- name: design-register-bootstrap description: Establish frontend design context before implementation, including creator intent and preserve-theirs constraints. Use when a project lacks a clear PRODUCT.md or DESIGN.md, when the model needs to distinguish brand surfaces from product UI, or when design direction keeps drifting because audience, intent, register, anti-references, and visual constraints are not explicit. license: MIT metadata: abvx_status: experimental abvx_origin: adapted --- # Design Register Bootstrap Set the design register before styling anything substantial. This skill exists for cases where the model is about to generate UI from vague vibes, default templates, or half-remembered brand intent. ## Use For - new frontend projects without `PRODUCT.md` or `DESIGN.md`; - redesigns where the surface is unclear: marketing brand page vs. app/product UI; - teams that keep getting mismatched typography, palette, density, or motion across tasks; - sessions where the agent should create or refresh design context before implementation. ## Core Rule Classify the surface first: - `brand`: marketing site, landing page, portfolio, campaign, editorial page, investor page, event page; - `product`: dashboard, admin UI, internal tool, settings, onboarding flow, forms, data-heavy app shell. Do not treat these as interchangeable. Brand surfaces can lead with identity and emotion. Product surfaces must optimize comprehension, workflow, and control clarity. ## Workflow 1. Read current evidence: - project files, CSS tokens, component library, screenshots, references, user brief; - any existing `PRODUCT.md`, `DESIGN.md`, brand notes, or design tokens. 2. Write a compact design register: - surface type: `brand` or `product`; - audience; - first-screen job; - creator intent: what the person is actually trying to make possible; - preserve-theirs: what must remain recognizably theirs; - brand/product lane; - anti-references: what this should explicitly not resemble; - color strategy: restrained, committed, full palette, or drenched; - typography direction; - motion tolerance; - density and radius rules. 3. If context files are missing, create or update: - `PRODUCT.md` for audience, product lane, workflow, tone, creator intent, preserve-theirs, and anti-references; - `DESIGN.md` for colors, typography, spacing, component patterns, creator intent, preserve-theirs, and do/don't rules. 4. Ask one clarifying question only when either the branch between `brand` and `product` is genuinely unclear or creator intent is too vague to guide a real design choice. If neither blocks a real choice, move. 5. Use the register as a constraint system for later frontend work. Do not restyle pages in the same pass unless the task explicitly includes implementation. ## Output Shape When working inline, summarize: - `register` - `audience` - `creator intent` - `design thesis` - `preserve-theirs` - `anti-references` - `color strategy` - `typography direction` - `motion and density` When creating files, prefer concise machine-usable docs over long essays. ## Guardrails - Skip this skill when an existing design register is coherent and the task only needs implementation or a narrow visual fix; preserve the existing context instead of recreating it. - Do not default every warm or “premium” brief to beige paper backgrounds. - Do not default every technical product to dark mode. - Do not choose palette or typography before writing the surface classification. - If existing project tokens are coherent, preserve them and document them instead of replacing them. - If the repo already has a stable design system, this skill should describe and reinforce it, not invent a second one. ## Final Report Include: - whether the surface was classified as `brand` or `product`; - files created or updated; - unresolved uncertainty; - downstream skills recommended, such as `frontend-taste-layer`, `frontend-product-builder`, or `web-quality-audit`. --- Source attribution: markoblogo Original project: https://github.com/markoblogo/abvx-agent-skills/blob/37a7146d940e6720a89e3281b0ddd9a0fcaf1f62/skills/design-register-bootstrap/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License Copyright (c) 2026 Anton Biletskiy-Volokh Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: markoblogo Original project: https://github.com/markoblogo/abvx-agent-skills/blob/37a7146d940e6720a89e3281b0ddd9a0fcaf1f62/skills/design-register-bootstrap/SKILL.md Attribution basis: Source repository record Fields of work: Design, Development & Engineering, Project & Program Management Roles: Frontend Developer, Graphic Designer, Product Designer, Project Manager, UX Designer Specialties: Cross Platform, Design, Frontend Tools: Tool not specified Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: adfa1901d0e28c4e0ad51fface056c0b50cc31320d191190a65380240556f6df