ezt írd at utasítasra de ne ilyen gagyin fogalmazz mar xd De...

Prompt

ezt írd at utasítasra de ne ilyen gagyin fogalmazz mar xd Define what you want & what success looks like: “I want to [TASK] so that [SUCCESS CRITERIA].” No roles, “act as a senior expert.” That era is over. : Title: The DESIGN.md Spec & How to Get One | Design Extractor URL Source: Markdown Content: Learn more The DESIGN.md specification DESIGN.md is a plain-text design system document that both humans and agents can read, edit, and enforce.introduced this convention: treat it as the design counterpart toAGENTS.md.README.md explains what the project is.AGENTS.md tells coding agents how to build it.DESIGN.md tells design agents how it should look and feel. When a design agent such as Google Stitch reads your DESIGN.md, generated screens can follow one shared palette, typography scale, and component language instead of drifting apart. The file is meant to be a living artifact you refine over time. Under the hood it pairs YAML design tokens with markdown rationale so agents get both exact values and the intent behind them. To get a DESIGN.md without writing one by hand, paste any public URL intoand it generates a Stitch-compatible DESIGN.md from any website in seconds. On this page Two layers Every DESIGN.md file has two layers. The YAML front matter contains machine-readable design tokens such as exact hex values, font properties, spacing scales, and component token references. The markdown body provides the human-readable design rationale. Tokens give agents precise values. Prose tells them why those values exist and how to apply them consistently across screens. --- name: DevFocus Dark colors: primary: "#2665fd" secondary: "#475569" surface: "#0b1326" on-surface: "#dae2fd" error: "#ffb4ab" typography: body-md: fontFamily: Inter fontSize: 16px fontWeight: 400 rounded: md: 8px --- # Design System ## Overview A focused, minimal dark interface for a developer productivity tool. Clean lines, low visual noise, high information density. ## Colors - **Primary** (#2665fd): CTAs, active states, key interactive elements - **Secondary** (#475569): Supporting UI, chips, secondary actions - **Surface** (#0b1326): Page backgrounds - **On-surface** (#dae2fd): Primary text on dark backgrounds - **Error** (#ffb4ab): Validation errors, destructive actions ## Typography - **Headlines**: Inter, semi-bold - **Body**: Inter, regular, 14-16px - **Labels**: Inter, medium, 12px, uppercase for section headers ## Components - **Buttons**: Rounded (8px), primary uses brand blue fill - **Inputs**: 1px border, subtle surface-variant background - **Cards**: No elevation, relies on border and background contrast ## Do's and Don'ts - Do use the primary color sparingly, only for the most important action - Don't mix rounded and sharp corners in the same view - Do maintain 4:1 contrast ratio for all text Section order Sections can be omitted if they are not relevant, but when present they should follow the canonical sequence below. 1. Overview. Also known as Brand & Style. 2. Colors. 3. Typography. 4. Layout. Also known as Layout & Spacing. 5. Elevation & Depth. Also known as Elevation. 6. Shapes. 7. Components. 8. Do's and Don'ts. Canonical sections in practice A compact markdown body showing each canonical section in order. Adjust the content to your product, keep the headings and sequence. ## Overview A minimal dark interface for a developer productivity tool. Clean lines, low visual noise, high information density. ## Colors - Primary (#2665fd): CTAs and active states - Surface (#0b1326): Page backgrounds - On-surface (#dae2fd): Text on dark backgrounds ## Typography - Headlines: Inter, semibold - Body: Inter, regular, 14-16px - Labels: Inter, medium, 12px, uppercase ## Layout - 8px base spacing unit, scale: 4 / 8 / 16 / 24 / 32 / 48 - Max content width 720px with 24px gutters on mobile ## Elevation & Depth - Surfaces rely on background contrast instead of shadow - Overlays use an 8 percent white tint on dark surfaces ## Shapes - Rounded 8px for controls, 16px for cards - Avoid mixing sharp and rounded corners in one view ## Components - Buttons: 8px rounded, primary filled with brand blue - Inputs: 1px border, subtle surface-variant background - Cards: no elevation, rely on border and background contrast ## Do's and Don'ts - Do use the primary color sparingly, for the most important action - Don't mix rounded and sharp corners in one view - Do maintain at least a 4:1 contrast ratio for all text Design tokens and schema DESIGN.md embeds design tokens as YAML front matter at the beginning of the file. The front matter block begins with a line containing exactly --- and ends with the same delimiter. version: <string name: <string description: <string colors: <token-name>: <Color> typography: <token-name>: <Typography> rounded: <scale-level>: <Dimension> spacing: <scale-level>: <Dimension | number> components: <component-name>: <token-name>: <string | token reference> Common scale names include xs, sm, md, lg, xl, and full, but any descriptive key is valid. Spacing tokens live in the YAML underspacing:and are described in the markdown body's Layout section. Token types Color Hex color in sRGB format. Example:"#1A1C1E". Dimension Number plus unit, such as px, em, or rem. Examples:48px,-0.02em. Token Reference Wrapped in curly braces and pointing to a value in the YAML tree. Example:{colors.primary}. Typography A composite object containing font properties such as family, size, weight, line height, and letter spacing. See. Typography properties fontFamily The font family name. fontSize The font size as a dimension. fontWeight Numeric weight such as 400 or 700. lineHeight A dimension or a unitless multiplier. Unitless values are recommended. letterSpacing Letter spacing adjustment as a dimension. fontFeature Configures font-feature-settings. fontVariation Configures font-variation-settings. Token references A token reference is wrapped in curly braces and contains an object path to another value in the YAML tree. For most token groups, the reference should point to a primitive value instead of a group. Within the components section, references to composite values such as typography levels are allowed. components: button-primary: backgroundColor: "{colors.primary-60}" textColor: "{colors.primary-20}" rounded: "{rounded.md}" button-primary-hover: backgroundColor: "{colors.primary-70}" Components The components section captures style guidance for component atoms such as buttons, chips, lists, inputs, checkboxes, radio buttons, and tooltips. Design systems can define additional components that matter to their product domain. Variants for hover, active, or pressed states are defined as separate component entries with related key names, such asbutton-primary-hover. backgroundColor Color textColor Color typography Typography rounded Dimension padding Dimension size Dimension height Dimension width Dimension Recommended token names These names are guidance, not requirements. They provide useful defaults for consistency across systems. Colors: primary, secondary, tertiary, neutral, surface, on-surface, error Typography:headline-display, headline-lg, headline-md, body-lg, body-md, body-sm, label-lg, label-md, label-sm Rounded: none, sm, md, lg, xl, full Your task is to take the provided technical description and rewrite it as a single, comprehensive prompt. Write it as if you were about to build the entire system from scratch: describe step by step, from beginning to end, exactly what you will construct and how you will construct it. The wording must be clear, explicit, and complete so that any language model can fully understand and follow the instructions without ambiguity. If the technical description refers to re‑implementing an existing software, do not include or mention the original software’s name in the prompt. Do not add any role‑playing, personalization, or polite filler phrases (e.g., ‘You are a software developer’, ‘As an expert’, ‘Please kindly’). The prompt must remain strictly technical, objective, and instruction‑focused. Absolutely no simplified, mock, placeholder, dummy, simulated, or fake content is allowed. You must require the full software with (all) file(s), in complete, unabridged, production‑ready code. Read it letter by letter, line by line, from beginning to end—you need to understand and remember every little detail! Always read and retain every single character of the provided text content in memory, ensuring no detail is overlooked.