gamified-app
Featured三屏: 封面 / 今日任务带 XP / 任务详情, 暗色舞台
Install
Quality Score: 91/100
Skill Content
Details
- Author
- nexu-io
- Repository
- nexu-io/html-anything
- Created
- 4 months ago
- Last Updated
- 1 weeks ago
- Language
- HTML
- License
- Apache-2.0
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
app-shell-ui
Build or restyle frontends using App Shell UI — a clean, restrained macOS-style desktop-tool shell (left nav + content, soft surfaces, raised cards, single brand accent, settings-list language) with first-class light and dark themes. Use when the user asks for app-shell-ui, /app-shell-ui, 桌面工具风 UI, 系统设置感界面, 应用外壳, sidebar shell, Clash/设置风格前端, light/dark desktop client UI, 深色主题, 浅色主题, theme toggle, or wants pages that share one reusable app chrome across chat / settings / console / mail-like layouts. Also use for high-fidelity HTML/React demos from tokens and component recipes, or when the user asks to reuse the bundled Top 50 React UI component library / gallery.
design-mobile-app
移动端 App 界面/原型专项方法论。当载体是**手机 App 界面或原型**、且当前产出"像 AI 默认模板 / 只换皮肤不换骨架 / 卡片从上往下等距堆叠"时触发。核心价值是把**结构手法**落到移动范式上——用拇指热区、safe area、一屏一焦、密度节奏、字号极端跳档+字重对比、网格对齐、不对称、原生组件语汇与手势驱动版面，把 App 做出"人做的"结构感。改版顺序以**用户指令为准**：默认可先调皮肤，结构按用户要求再动或一起动，不强行每轮改骨架。触发词：「移动端设计」「App 界面」「App 原型」「手机 UI」「iOS 设计」「移动端结构」「反移动 slop」「拇指热区」「底部导航」「bottom sheet」「移动端排版」「App 组件」「线框图」「低保真」「PRD 走查」「全流程巡查」「页面巡查」「写 APP」。
how-they-built-it
拆解竞品 App / 网页是怎么做出来的，产出能直接照着做的规格与分析。三种入口都用本技能——拆这个（觉得某产品或某一屏好，要机制和规格）、帮我找（要做某一屏没思路，要三个参考的对比与建议，web 与 App 一起找）、功能调研（要做某个功能，先去调研竞品怎么做的，产出需求分析 + 功能分析 + 技术剖解）。以下全都应该使用：①点了名的——「分析一下 XX 的登录页」「Notion 的首页信息结构拆一下」；②没点名、要找思路的——「我要做空状态页，没想法」「同类产品的付费墙都怎么设计」；③只问一个机制细节的——「那个背景是视频还是静态图」「这个转场到底多长时间」；④只有感受没有对象的——「我们的界面看起来很廉价，对手看着就贵，差在哪」；⑤要做某个功能先调研的——「我们要做自动分章节，先看看竞品怎么做的」「这个功能帮我出一份需求和功能分析」；⑥⭐口语化追问实现细节的（不带「分析/调研」这类动词、也不点名产品，一样要用）——「他们那个转写是端侧还是云端」「这块是自己做的还是用的现成方案」「那个功能到底做到什么程度」「他们怎么实现的」。英文同理（analyse how X built their sign-in screen / help me find ideas for an onboarding flow / research how competitors implement <feature> / is their transcription on-device or cloud）。核心价值是把「看起来很高级」「他们怎么做到的」拆成可量化、可追溯到证据的机制（动效节奏、渐变结构、资源类型、色彩规格、原生库、第三方 SDK、接口结构），⛔ 而不是停在主观描述或猜测。⛔ 不要用于给我方从零做设计、改我方文案配色、修我方页面 bug、竞品的定价与商业策略调研。涉及下载安装包、在竞品 App 上产生真实数据、或提取竞品资源时会先征求授权。