[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2FGGNTFA8ZG88JAXY0E6Q":3,"skill-same:01M6D2FGGNTFA8ZG88JAXY0E6Q":67},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":49,"ownerHtmlUrl":50,"ownerBlogUrl":49,"ownerDescription":51,"updatedAt":52,"install":53,"resources":66},"01M6D2FGGNTFA8ZG88JAXY0E6Q","ui-reference-launch",null,"A worked reference, measured from a hand-designed launch page: a product before or at launch (early access, a waitlist, a developer tool) on one page. Its skeleton, wireframes, measures and component anatomy, and what to take from it. Read before building a launch, waitlist or single-product page.","enowdev\u002Fenowxcli","enowdev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F179420349?v=4","01M6D1MVX2KC0X3Z9NESE7P22K","Enow Dev.","01M6D1MW1FMZGBDKWAJY4GQX81",67,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-reference-launch\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"launch","ui","reference","ui reference launch","component","product","developer","access","tool","page","before building","read","take","wireframes","anatomy","2026-11-10 10:12:30",false,"---\nname: ui-reference-launch\ndescription: \"A worked reference, measured from a hand-designed launch page: a product before or at launch (early access, a waitlist, a developer tool) on one page. Its skeleton, wireframes, measures and component anatomy, and what to take from it. Read before building a launch, waitlist or single-product page.\"\n---\n\n# Reference: a launch page\n\nMeasured from a hand-designed page (enowx.ai, an AI coding tool in early\naccess). Take its structure and its decisions; its words, name, colours,\nlogo and background belong to it. Its concept is its own: find yours from\nyour product (the `ui` skill, section 1).\n\n**Its concept**: the page reads like the product's own report. The hero's\nvisual is a real example of what the product produces, and every section\nafter it is set as plainly as a document: a label, a heading, a sentence,\nthen a ruled grid of facts.\n\n## Skeleton\n\n1. Header, sticky, 77px.\n2. Hero, about one screen: the claim, the sign-up, and the product's real\n   output beside them.\n3. \"What is inside\": six capabilities.\n4. \"Who does the work\": three roles.\n5. \"How it works\": four steps.\n6. The sign-up again, with what happens after it.\n7. Footer.\n\nSections 3 to 6 share one composition (below), which is what makes the page\ncalm: the reader learns the pattern once.\n\n## Wireframes (wide screen)\n\n```\n┌───────────────────────────────────────────────────────────────────────┐\n│ ✕ WORDMARK \u002F early access    ( Link  Link  Link  Link )   (Sign up)  │ 77px, sticky\n├───────────────────────────────────────────────────────────────────────┤\n│ [◷ status chip]                                                       │\n│ The claim, in one line,                     ┌──────────────────────┐ │\n│ its consequence in the muted colour.        │ ● ● ●  example output│ │\n│ One paragraph, about 60 characters wide,    │ LABEL   value        │ │\n│ saying what it is and what it does.         │ LABEL   value        │ │\n│ ┌──────────────────────────┬───────────┐    │ LABEL   value        │ │\n│ │ email field              │ [ Button ]│    └──────────────────────┘ │\n│ └──────────────────────────┴───────────┘                             │\n│ small note: what the address is used for                              │\n│ [ community button ]   link to the first section                      │\n├───────────────────────────────────────────────────────────────────────┤\n│ SECTION LABEL                                                         │\n│ Heading of the section.              One sentence that explains it,  │\n│                                      set against the heading's base. │\n│ ───────────────────────────────────────────────────────────────────── │\n│ ┌───────────────────────┬───────────────────────┬───────────────────┐ │\n│ │ area\u002Fname             │ area\u002Fname             │ area\u002Fname         │ │\n│ │ [▢] Title             │ [▢] Title             │ [▢] Title         │ │\n│ │ Two or three lines.   │ Two or three lines.   │ Two or three      │ │\n│ ├───────────────────────┼───────────────────────┼───────────────────┤ │\n│ │ ...                   │ ...                   │ ...               │ │\n│ └───────────────────────┴───────────────────────┴───────────────────┘ │\n└───────────────────────────────────────────────────────────────────────┘\n```\n\nOn a phone: the header keeps the brand and the button; the hero stacks\n(text, form, then the output panel); the form's field and button stack, the\nbutton full width; every ruled grid becomes one column.\n\n## Measures\n\n- Container 1240px, centred. Hero columns 633 and 551px, gap 56px (about 7\n  and 5 of 12). Section intro columns 588 and 588px, gap 64px.\n- Ruled grid: 3 columns of 412px (4 of 309px for steps) with a 1px gap over\n  a line-coloured background, so the gaps draw the lines; cells padded 24 to\n  32px; no shadows, no radius beyond a few pixels.\n- Type: one family (IBM Plex Sans) for everything, a monospace for the\n  output panel and the small tags. H1 56px, weight 400, tracking -1.9px; H2\n  36px, weight 400; H3 16px, weight 500; labels 14px uppercase, 2px\n  tracking; body 16px.\n- Colour: near-black background (about 4% lightness), off-white text, one\n  muted grey for second lines and notes, the button inverted (light on\n  dark). No accent colour beyond that.\n\n## Anatomy worth taking\n\n- **Header**: brand at the left with a small status label beside it (early\n  access, beta); the in-page links centred in one pill; the one action at\n  the right as an outline pill. The links point at sections that exist.\n- **Two-tone headline**: the claim in the text colour, its consequence on\n  the second line in the muted one. One sentence, two weights of meaning.\n- **Sign-up as one control**: the field and the button joined in a single\n  bordered box; the note on what happens to the address directly under it,\n  not in a footer.\n- **The product's real output as the hero image**: a bordered panel with a\n  title bar holding label and value rows the product actually produces. Not\n  a mock-up of a dashboard, not an illustration.\n- **Section intro as a pair**: label and heading on the left, the\n  explanation on the right, aligned to the heading's baseline, a hairline\n  under both. Instead of a centred heading and subtitle over three cards.\n- **Ruled grid of facts**: cells divided by hairlines, each with a small\n  monospace tag naming its area, a small icon in a square, a title and two\n  or three lines. Steps use the same grid with short lines instead of\n  paragraphs; the closing section numbers its cells 01, 02, 03.\n- **Footer**: the logo, one line on what it is, the year; the same section\n  links at the right.\n\n## When it fits, and when not\n\nFor one product with one action (join, try, install), especially before\nlaunch. Its dark, monospace-tagged look suits a developer tool; for a\nbakery, a clinic or a school, keep the skeleton (claim, evidence, pair\nintros, ruled facts, one form) and take the look from that product's own\nconcept.\n","# Reference: a launch page\n\nMeasured from a hand-designed page (enowx.ai, an AI coding tool in early\naccess). Take its structure and its decisions; its words, name, colours,\nlogo and background belong to it. Its concept is its own: find yours from\nyour product (the `ui` skill, section 1).\n\n**Its concept**: the page reads like the product's own report. The hero's\nvisual is a real example of what the product produces, and every section\nafter it is set as plainly as a document: a label, a heading, a sentence,\nthen a ruled grid of facts.\n\n## Skeleton\n\n1. Header, sticky, 77px.\n2. Hero, about one screen: the claim, the sign-up, and the product's real\n   output beside them.\n3. \"What is inside\": six capabilities.\n4. \"Who does the work\": three roles.\n5. \"How it works\": four steps.\n6. The sign-up again, with what happens after it.\n7. Footer.\n\nSections 3 to 6 share one composition (below), which is what makes the page\ncalm: the reader learns the pattern once.\n\n## Wireframes (wide screen)\n\n```\n┌───────────────────────────────────────────────────────────────────────┐\n│ ✕ WORDMARK \u002F early access    ( Link  Link  Link  Link )   (Sign up)  │ 77px, sticky\n├───────────────────────────────────────────────────────────────────────┤\n│ [◷ status chip]                                                       │\n│ The claim, in one line,                     ┌──────────────────────┐ │\n│ its consequence in the muted colour.        │ ● ● ●  example output│ │\n│ One paragraph, about 60 characters wide,    │ LABEL   value        │ │\n│ saying what it is and what it does.         │ LABEL   value        │ │\n│ ┌──────────────────────────┬───────────┐    │ LABEL   value        │ │\n│ │ email field              │ [ Button ]│    └──────────────────────┘ │\n│ └──────────────────────────┴───────────┘                             │\n│ small note: what the address is used for                              │\n│ [ community button ]   link to the first section                      │\n├───────────────────────────────────────────────────────────────────────┤\n│ SECTION LABEL                                                         │\n│ Heading of the section.              One sentence that explains it,  │\n│                                      set against the heading's base. │\n│ ───────────────────────────────────────────────────────────────────── │\n│ ┌───────────────────────┬───────────────────────┬───────────────────┐ │\n│ │ area\u002Fname             │ area\u002Fname             │ area\u002Fname         │ │\n│ │ [▢] Title             │ [▢] Title             │ [▢] Title         │ │\n│ │ Two or three lines.   │ Two or three lines.   │ Two or three      │ │\n│ ├───────────────────────┼───────────────────────┼───────────────────┤ │\n│ │ ...                   │ ...                   │ ...               │ │\n│ └───────────────────────┴───────────────────────┴───────────────────┘ │\n└───────────────────────────────────────────────────────────────────────┘\n```\n\nOn a phone: the header keeps the brand and the button; the hero stacks\n(text, form, then the output panel); the form's field and button stack, the\nbutton full width; every ruled grid becomes one column.\n\n## Measures\n\n- Container 1240px, centred. Hero columns 633 and 551px, gap 56px (about 7\n  and 5 of 12). Section intro columns 588 and 588px, gap 64px.\n- Ruled grid: 3 columns of 412px (4 of 309px for steps) with a 1px gap over\n  a line-coloured background, so the gaps draw the lines; cells padded 24 to\n  32px; no shadows, no radius beyond a few pixels.\n- Type: one family (IBM Plex Sans) for everything, a monospace for the\n  output panel and the small tags. H1 56px, weight 400, tracking -1.9px; H2\n  36px, weight 400; H3 16px, weight 500; labels 14px uppercase, 2px\n  tracking; body 16px.\n- Colour: near-black background (about 4% lightness), off-white text, one\n  muted grey for second lines and notes, the button inverted (light on\n  dark). No accent colour beyond that.\n\n## Anatomy worth taking\n\n- **Header**: brand at the left with a small status label beside it (early\n  access, beta); the in-page links centred in one pill; the one action at\n  the right as an outline pill. The links point at sections that exist.\n- **Two-tone headline**: the claim in the text colour, its consequence on\n  the second line in the muted one. One sentence, two weights of meaning.\n- **Sign-up as one control**: the field and the button joined in a single\n  bordered box; the note on what happens to the address directly under it,\n  not in a footer.\n- **The product's real output as the hero image**: a bordered panel with a\n  title bar holding label and value rows the product actually produces. Not\n  a mock-up of a dashboard, not an illustration.\n- **Section intro as a pair**: label and heading on the left, the\n  explanation on the right, aligned to the heading's baseline, a hairline\n  under both. Instead of a centred heading and subtitle over three cards.\n- **Ruled grid of facts**: cells divided by hairlines, each with a small\n  monospace tag naming its area, a small icon in a square, a title and two\n  or three lines. Steps use the same grid with short lines instead of\n  paragraphs; the closing section numbers its cells 01, 02, 03.\n- **Footer**: the logo, one line on what it is, the year; the same section\n  links at the right.\n\n## When it fits, and when not\n\nFor one product with one action (join, try, install), especially before\nlaunch. Its dark, monospace-tagged look suits a developer tool; for a\nbakery, a clinic or a school, keep the skeleton (claim, evidence, pair\nintros, ruled facts, one form) and take the look from that product's own\nconcept.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-reference-launch",21,"https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli","https:\u002F\u002Fenowx.ai","https:\u002F\u002Fgithub.com\u002Fenowdev","Pretending to be a Developer","2026-10-06 02:05:35",{"source":8,"skillName":5,"commands":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-reference-launch",{"tool":59,"command":60},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-reference-launch",{"tool":62,"command":63},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-reference-launch","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-reference-launch\u002FSKILL.md",true,[],[68,84,106,120,145,166],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":79,"publishedAt":39},"01M6D2HQYSQD9N7MTNDT4A7CBM","demo-skill","Project-scope demo skill for tests.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fworkspace\u002F.agents\u002Fskills\u002Fdemo-skill\u002FSKILL.md",[74],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[80,81,82,83,35],"demo skill","demo","tests","project",{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":96,"publishedAt":39},"01M6D2HM0GCPM0TM2HPG9HHR2R","writing","Writing words people read: the specific thing instead of claims, words to drop, sentences, interface copy (buttons, labels, errors, empty states, confirmations), page copy, notifications and emails, alt text and link text, numbers and dates, words that translate well, documentation and voice. Read before writing a page's copy, an interface's text or a document.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fwriting\u002FSKILL.md",[90,93],{"categoryNo":91,"categoryName":92,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":94,"categoryName":95,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000036","内容创作者",[86,97,98,99,100,101,35,33,102,103,104,105],"text","emails","empty","drop","document","voice","notifications","documentation","translate",{"skillNo":107,"name":25,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":114,"publishedAt":39},"01M6D2HG07YS49NM196Q0R3AZ8","Designing or restyling an interface: direction, layout, type, colour, icons, components, states, responsive behaviour. Read before building a page, a screen or a set of components.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui\u002FSKILL.md",[111],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师",[25,115,116,117,118,33,119,35,34],"icons","components","SET","responsive","layout",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":130,"publishedAt":39},"01M6D2HB59HZHWG1RYZDV4SJ91","ui-themes","Light and dark themes, and colour that holds in both: tokens with a value per theme, and what each kind of content needs to stay visible (icons, SVG drawings and line art, logos, photos, screenshots, charts, code, maps, borders, shadows, focus, form controls), switching without a flash, and checking both. Read before building a second theme or a theme toggle, and before any drawing, logo or chart on a page that has two themes.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-themes\u002FSKILL.md",[126,129],{"categoryNo":127,"categoryName":128,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[25,131,132,133,134,135,136,137,138,35,34,139,33,140,141,142,115,143,144],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":154,"publishedAt":39},"01M6D2H5R5KRAE524C8QX0T7Q0","ui-structure","Structure before styling: the blueprint written before any interface code (the screen's job, the regions its kind of page needs, their order and why, the layout skeleton in numbers, the components and their states), the anatomy and order of a homepage, a dashboard, a list, a detail page, settings, a form, sign-in, pricing, docs, an article and a checkout, and how to turn the blueprint into code (tokens, layout primitives, components, sections, page). Read first, before building or rebuilding any page or screen.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-structure\u002FSKILL.md",[151,152,153],{"categoryNo":91,"categoryName":92,"taxonomyType":77,"taxonomyTypeDesc":78},{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":94,"categoryName":95,"taxonomyType":21,"taxonomyTypeDesc":22},[155,25,156,116,157,158,140,159,160,38,119,134,161,162,163,35,34,33,164,165],"structure","ui structure","pricing","dashboard","Blueprint","article","styling","primitives","list","why","how",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":179,"publishedAt":39},"01M6D2H0ZZBJG77MBGPZHA6MWD","ui-stack-vue","Building interfaces in Vue 3 and Nuxt: project layout, script setup with typed defineProps, defineEmits and defineModel, attribute fallthrough, slots and scoped slots, template refs, ref, reactive and computed, watch versus watchEffect, composables and VueUse, provide and inject, Pinia, keyed v-for, transitions, Nuxt 4 (app directory, pages, layouts, useFetch and useAsyncData keys, $fetch in handlers, server routes, runtime config, useSeoMeta, NuxtImg, middleware), VeeValidate forms, Reka UI and Nuxt UI, testing, vue-tsc, and the traps. Read when the project uses Vue or Nuxt.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-stack-vue\u002FSKILL.md",[172,175,178],{"categoryNo":173,"categoryName":174,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":176,"categoryName":177,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},[25,180,181,182,183,184,185,186,119,83,187,188,35,189,190,191,192,193,194,195],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]