[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2FPJMKK08Z3B6MGMKVDC3":3,"skill-same:01M6D2FPJMKK08Z3B6MGMKVDC3":65},{"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":18,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":47,"ownerHtmlUrl":48,"ownerBlogUrl":47,"ownerDescription":49,"updatedAt":50,"install":51,"resources":64},"01M6D2FPJMKK08Z3B6MGMKVDC3","ui-reference-saas",null,"A worked reference, measured from a hand-designed product site: a professional tool with several features, proof, a team, pricing and a sign-up (a SaaS for lawyers). Its skeleton, wireframes, measures and component anatomy, and what to take from it. Read before building a product or SaaS marketing site with pricing.","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-saas\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"ui reference saas","ui","saas","reference","before building","anatomy","wireframes","sign","take","up","read","pricing","site","tool","marketing","team","product","component","2026-11-10 10:12:30",false,"---\nname: ui-reference-saas\ndescription: \"A worked reference, measured from a hand-designed product site: a professional tool with several features, proof, a team, pricing and a sign-up (a SaaS for lawyers). Its skeleton, wireframes, measures and component anatomy, and what to take from it. Read before building a product or SaaS marketing site with pricing.\"\n---\n\n# Reference: a product site with pricing\n\nMeasured from a hand-designed site (jagahukum.com, a legal research tool for\nIndonesian lawyers). Take its structure and its decisions; its words, name,\nimagery and colours belong to it. Its concept is its own: find yours from\nyour product (the `ui` skill, section 1).\n\n**Its concept**: a serious professional tool that belongs to its country.\nThe hero is a painting of a landmark the audience knows; the pages\nalternate a warm paper background with deep navy bands, like a legal\ndocument and its binding; an italic serif marks the words that matter.\n\n## Skeleton\n\n1. A thin announcement bar: one line of real news and a link, dismissable.\n2. Navigation over the hero: brand, seven links (two with menus), sign-in\n   and the one filled \"Try free\".\n3. Hero, one screen: a full-bleed image of a place, a three-line claim, one\n   sentence, two buttons.\n4. The problem: one large, sourced number beside a statement.\n5. \"See it work\": the product itself, large, in a framed window.\n6. Four features as a 2 by 2, each shown by a small real piece of the\n   interface, not an icon.\n7. Membership (dark band): what one account gives, as numbered rows, beside\n   an object that makes the product tangible (an ID card on a lanyard).\n8. Numbers strip: four figures, dated (\"as of May 2026\").\n9. Team: who it was built with, as a list with large initials.\n10. One testimonial at a time, large, with its source.\n11. Pricing: a monthly and yearly toggle, the tiers in a row.\n12. How it works: four steps.\n13. A closing band with the hero image again, then a full footer.\n\nLight and dark bands alternate for a reason: the product is shown on light,\nmembership, testimonials and pricing sit on the navy.\n\n## Wireframes (wide screen)\n\n```\n│ one line of news · link                                          ✕ │ thin bar\n│ ◉ Brand   Product▾ Solutions▾ Research Security Company Pricing    │\n│                                          ◐  (Log in)  [Try free]   │ over the hero\n│░░░░░░░░░░░░░░░░░ full-bleed painting of a known place ░░░░░░░░░░░░│\n│               Claim in large type,                                 │\n│               over two lines, and one                              │\n│               Last word in italic serif.                           │\n│          One sentence of what it does, ending in italics.          │\n│               [ Start free ]  ( Watch the demo → )                 │\n├────────────────────────────────────────────────────────────────────┤\n│ ▏[figure]K+                    THE PROBLEM                         │\n│ ▏LABEL UNDER THE NUMBER        A statement in large type whose     │\n│                                second half turns italic.           │\n│                                ──                                  │\n├────────────────────────────────────────────────────────────────────┤\n│  ┌─ real UI snippet ────────┐   ┌─ real UI snippet ────────┐       │\n│  │ a chat with its steps    │   │ a file table             │       │\n│  └──────────────────────────┘   └──────────────────────────┘       │\n│  Feature title (serif)          Feature title (serif)              │\n│  Two lines on what it does.     Two lines on what it does.         │\n├────────────────────────────────────────────────────────────────────┤\n│ Italic serif heading.                                AS OF DATE    │\n│ ····································································│\n│  [figure] K+   │ [figure] M+  │ \u003C[figure] ms  │ [figure] %         │\n│  LABEL         │  LABEL       │  LABEL        │  LABEL             │\n└────────────────────────────────────────────────────────────────────┘\n```\n\nOn a phone: the navigation folds behind a menu; the hero keeps its image,\nits claim at 40 to 48px; the 2 by 2 becomes one column (snippet, title,\ntext); the numbers go two by two; pricing cards scroll sideways with the\nnext one peeking.\n\n## Measures\n\n- Content 960 to 1100px wide, centred; section padding 96 to 128px on wide\n  screens.\n- Problem row: 442 and 598px, gap 96px. Features: 552 and 552px, gap 32px.\n  Team: 468 and 572px, gap 96px. Steps: 4 columns of 263px, gap 28px. Stats:\n  4 equal columns divided by 1px vertical rules.\n- Type, three families, each with one job: a geometric sans (Geist) for\n  headings and interface (H1 96px, weight 600; H2 48px, weight 400); a serif\n  (Fraunces) in italic for the emphasised words and for feature titles (21px,\n  weight 500); a monospace (JetBrains Mono) for labels, dates and units\n  (11 to 12px, uppercase, 2 to 3px tracking).\n- Colour: warm paper (about 94% lightness) and a deep navy (about 12%), ink\n  near-black on paper, off-white on navy, one muted blue for the italics on\n  paper and a gold on navy. Nothing else.\n- Framed product window: 16px radius, deep soft shadow, bracket marks at two\n  corners; UI snippets in a pale inset frame with a 12px radius.\n\n## Anatomy worth taking\n\n- **Evidence as the images**: the product's real screens and pieces of its\n  interface stand where icons and stock photos usually go.\n- **One big number with its label and a vertical accent line**, beside the\n  problem it measures. Numbers only when real, with the date they were true.\n- **Italic serif for the turn in a sentence**: the last word of the claim,\n  or the second half of a statement, set in the italic serif and the accent\n  colour. One word or phrase per heading, the one that carries the meaning;\n  never whole paragraphs.\n- **Numbered rows as a list of what you get**: bordered rows with a small\n  number (01 to 04) and one line each, the first highlighted.\n- **Team as a list**: a large italic initial, the area of practice, one line;\n  hairlines between rows. No stock headshots.\n- **Testimonials one at a time**: a large italic quote, the person's name and\n  role under a hairline, a counter (\"03 \u002F 04\") and previous and next buttons.\n- **Pricing card**: the name and the price on one line, who it is for, the\n  price in the local currency under it, one outline button, a \"What is\n  included\" divider, then a check list. One chip on the tier that deserves\n  it, sitting on the card's border.\n- **Footer with a disclaimer**: the brand, one line on what the product is\n  and is not, contact, then columns of the links that exist.\n\n## When it fits, and when not\n\nFor a product with several features, a team to show and paid plans, sold to\nprofessionals. The landmark painting, the paper and navy, and the italics\ncome from its audience; a product for designers or for gamers takes the\nskeleton (proof, product in a window, real snippets, dated numbers, list\nteam, one quote at a time, honest pricing) with a look of its own.\n","# Reference: a product site with pricing\n\nMeasured from a hand-designed site (jagahukum.com, a legal research tool for\nIndonesian lawyers). Take its structure and its decisions; its words, name,\nimagery and colours belong to it. Its concept is its own: find yours from\nyour product (the `ui` skill, section 1).\n\n**Its concept**: a serious professional tool that belongs to its country.\nThe hero is a painting of a landmark the audience knows; the pages\nalternate a warm paper background with deep navy bands, like a legal\ndocument and its binding; an italic serif marks the words that matter.\n\n## Skeleton\n\n1. A thin announcement bar: one line of real news and a link, dismissable.\n2. Navigation over the hero: brand, seven links (two with menus), sign-in\n   and the one filled \"Try free\".\n3. Hero, one screen: a full-bleed image of a place, a three-line claim, one\n   sentence, two buttons.\n4. The problem: one large, sourced number beside a statement.\n5. \"See it work\": the product itself, large, in a framed window.\n6. Four features as a 2 by 2, each shown by a small real piece of the\n   interface, not an icon.\n7. Membership (dark band): what one account gives, as numbered rows, beside\n   an object that makes the product tangible (an ID card on a lanyard).\n8. Numbers strip: four figures, dated (\"as of May 2026\").\n9. Team: who it was built with, as a list with large initials.\n10. One testimonial at a time, large, with its source.\n11. Pricing: a monthly and yearly toggle, the tiers in a row.\n12. How it works: four steps.\n13. A closing band with the hero image again, then a full footer.\n\nLight and dark bands alternate for a reason: the product is shown on light,\nmembership, testimonials and pricing sit on the navy.\n\n## Wireframes (wide screen)\n\n```\n│ one line of news · link                                          ✕ │ thin bar\n│ ◉ Brand   Product▾ Solutions▾ Research Security Company Pricing    │\n│                                          ◐  (Log in)  [Try free]   │ over the hero\n│░░░░░░░░░░░░░░░░░ full-bleed painting of a known place ░░░░░░░░░░░░│\n│               Claim in large type,                                 │\n│               over two lines, and one                              │\n│               Last word in italic serif.                           │\n│          One sentence of what it does, ending in italics.          │\n│               [ Start free ]  ( Watch the demo → )                 │\n├────────────────────────────────────────────────────────────────────┤\n│ ▏[figure]K+                    THE PROBLEM                         │\n│ ▏LABEL UNDER THE NUMBER        A statement in large type whose     │\n│                                second half turns italic.           │\n│                                ──                                  │\n├────────────────────────────────────────────────────────────────────┤\n│  ┌─ real UI snippet ────────┐   ┌─ real UI snippet ────────┐       │\n│  │ a chat with its steps    │   │ a file table             │       │\n│  └──────────────────────────┘   └──────────────────────────┘       │\n│  Feature title (serif)          Feature title (serif)              │\n│  Two lines on what it does.     Two lines on what it does.         │\n├────────────────────────────────────────────────────────────────────┤\n│ Italic serif heading.                                AS OF DATE    │\n│ ····································································│\n│  [figure] K+   │ [figure] M+  │ \u003C[figure] ms  │ [figure] %         │\n│  LABEL         │  LABEL       │  LABEL        │  LABEL             │\n└────────────────────────────────────────────────────────────────────┘\n```\n\nOn a phone: the navigation folds behind a menu; the hero keeps its image,\nits claim at 40 to 48px; the 2 by 2 becomes one column (snippet, title,\ntext); the numbers go two by two; pricing cards scroll sideways with the\nnext one peeking.\n\n## Measures\n\n- Content 960 to 1100px wide, centred; section padding 96 to 128px on wide\n  screens.\n- Problem row: 442 and 598px, gap 96px. Features: 552 and 552px, gap 32px.\n  Team: 468 and 572px, gap 96px. Steps: 4 columns of 263px, gap 28px. Stats:\n  4 equal columns divided by 1px vertical rules.\n- Type, three families, each with one job: a geometric sans (Geist) for\n  headings and interface (H1 96px, weight 600; H2 48px, weight 400); a serif\n  (Fraunces) in italic for the emphasised words and for feature titles (21px,\n  weight 500); a monospace (JetBrains Mono) for labels, dates and units\n  (11 to 12px, uppercase, 2 to 3px tracking).\n- Colour: warm paper (about 94% lightness) and a deep navy (about 12%), ink\n  near-black on paper, off-white on navy, one muted blue for the italics on\n  paper and a gold on navy. Nothing else.\n- Framed product window: 16px radius, deep soft shadow, bracket marks at two\n  corners; UI snippets in a pale inset frame with a 12px radius.\n\n## Anatomy worth taking\n\n- **Evidence as the images**: the product's real screens and pieces of its\n  interface stand where icons and stock photos usually go.\n- **One big number with its label and a vertical accent line**, beside the\n  problem it measures. Numbers only when real, with the date they were true.\n- **Italic serif for the turn in a sentence**: the last word of the claim,\n  or the second half of a statement, set in the italic serif and the accent\n  colour. One word or phrase per heading, the one that carries the meaning;\n  never whole paragraphs.\n- **Numbered rows as a list of what you get**: bordered rows with a small\n  number (01 to 04) and one line each, the first highlighted.\n- **Team as a list**: a large italic initial, the area of practice, one line;\n  hairlines between rows. No stock headshots.\n- **Testimonials one at a time**: a large italic quote, the person's name and\n  role under a hairline, a counter (\"03 \u002F 04\") and previous and next buttons.\n- **Pricing card**: the name and the price on one line, who it is for, the\n  price in the local currency under it, one outline button, a \"What is\n  included\" divider, then a check list. One chip on the tier that deserves\n  it, sitting on the card's border.\n- **Footer with a disclaimer**: the brand, one line on what the product is\n  and is not, contact, then columns of the links that exist.\n\n## When it fits, and when not\n\nFor a product with several features, a team to show and paid plans, sold to\nprofessionals. The landmark painting, the paper and navy, and the italics\ncome from its audience; a product for designers or for gamers takes the\nskeleton (proof, product in a window, real snippets, dated numbers, list\nteam, one quote at a time, honest pricing) with a look of its own.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-reference-saas",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":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-reference-saas",{"tool":57,"command":58},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-reference-saas",{"tool":60,"command":61},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-reference-saas","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-reference-saas\u002FSKILL.md",true,[],[66,82,107,121,148,168],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":77,"publishedAt":37},"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",[72],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[78,79,80,81,29],"demo skill","demo","tests","project",{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":96,"publishedAt":37},"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",[88,91],{"categoryNo":89,"categoryName":90,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":92,"categoryName":93,"taxonomyType":94,"taxonomyTypeDesc":95},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[84,97,98,99,100,101,29,102,103,104,105,106],"text","emails","empty","drop","document","page","voice","notifications","documentation","translate",{"skillNo":108,"name":20,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":115,"publishedAt":37},"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",[112],{"categoryNo":113,"categoryName":114,"taxonomyType":94,"taxonomyTypeDesc":95},"01JBSEEDCAT000000000000032","设计师",[20,116,117,118,119,102,120,29,23],"icons","components","SET","responsive","layout",{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":133,"publishedAt":37},"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",[127,130],{"categoryNo":128,"categoryName":129,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":131,"categoryName":132,"taxonomyType":94,"taxonomyTypeDesc":95},"01JBSEEDCAT000000000000030","开发工程师",[20,134,135,136,137,138,139,140,141,29,23,142,102,143,144,145,116,146,147],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":157,"publishedAt":37},"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",[154,155,156],{"categoryNo":89,"categoryName":90,"taxonomyType":75,"taxonomyTypeDesc":76},{"categoryNo":131,"categoryName":132,"taxonomyType":94,"taxonomyTypeDesc":95},{"categoryNo":92,"categoryName":93,"taxonomyType":94,"taxonomyTypeDesc":95},[158,20,159,117,30,160,143,161,162,24,120,137,163,164,165,29,23,102,166,167],"structure","ui structure","dashboard","Blueprint","article","styling","primitives","list","why","how",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":181,"publishedAt":37},"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",[174,177,180],{"categoryNo":175,"categoryName":176,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":178,"categoryName":179,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":113,"categoryName":114,"taxonomyType":94,"taxonomyTypeDesc":95},[20,182,183,184,185,186,187,188,120,81,189,190,29,191,192,193,194,195,196,197],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]