网易蜗牛读书设计风格
使用此 Skill，可以生成或改造具有网易蜗牛读书设计风格的网页或 App 界面，包括发现页、书架、书籍详情、阅读器、书评和文学社区页面。结果保持原创，不复刻参考产品的品牌身份与素材。
核心方向
- 把界面视为一本数字文学刊物，而不是卡片密集的常规商城。
- 主要依靠留白、排版、书封和细线建立层级。
- 让书封与编辑图片承担界面中的大部分色彩。
- 仅将低饱和珊瑚红用于关注等主要社交动作，将暖铜色用于阅读、会员和精品书语义。
- 持久导航和普通控件保持单色；选中导航通常使用深炭灰，而不是鲜艳色彩。
- 优先采用通栏内容区，通过间距、发丝线或浅灰分区带进行分隔，不要把每一项都装进卡片。
- 必须使用卡片时保持简洁，绝不在卡片左侧添加装饰性竖条。
工作流程
- 判断页面的主要任务是发现、阅读、收藏、评论、讨论还是浏览个人主页。
- 决定由哪些内容承担色彩，通常是书封、编辑图片或一个克制的重点动作。
- 先建立字体、间距、书封比例、分隔方式和暖色强调令牌，再设计单个组件。
- 按 references/design-system.md 中对应的模式构建页面。
- 需要产出界面代码时，读取 references/implementation-recipes.md；从零创建原生网页时可复制并改造
assets/starter/，已有项目则沿用其框架、组件和目录结构。 - 将所有名称、封面、文案和社区内容替换为用户产品自己的内容。
- 🔴 检查点：交付前对照引用文件中的完成检查表验证实现。
代码交付
- 用户要求实现或快速原型时，至少交付一个完整组件或可运行页面，而不只给出设计说明。
- 使用现有项目的技术栈；仅在从零开始且用户未指定技术栈时，以语义化 HTML 与 CSS 作为低依赖基线。
- 示例代码是可改造的参考实现，不是固定页面结构。按任务删减组件，不要为了展示风格强行加入书架、社交或阅读器模块。
- 实现必须包含与任务相关的响应式布局、键盘焦点、空状态或缺图降级；交互状态只实现实际存在的控件。
- 复用设计令牌，避免在各组件中散落近似颜色、间距和阴影值。
降级处理
- 无法访问参考资料时，使用本地令牌与核心方向，并说明还原度会降低。
- 没有已获许可的图片时，使用用户素材或中性占位图，绝不复制参考素材。
- 用户品牌规范与本风格冲突时，保留用户品牌，仅采用兼容的布局和节奏。
- 对比度或触控尺寸不合格时，先修正颜色或尺寸再交付。
- 🛑 如果用户要求复制参考品牌、素材或逐像素复刻页面，停止执行该部分，解释边界并提供原创改编方案。
必须遵守
- 中文衬线字体仅用于阅读正文、文学标题和编辑式展示；导航与控件使用中性的系统无衬线字体。
- 长文需要舒适的行宽、宽松行高和清晰对比度。
- 书封保持接近 2:3 的竖向比例，使用很小或不使用圆角，并添加极轻的阴影。
- 珊瑚红只用于高优先级社交动作、徽标和通知数字。
- 阅读动作、精品访问和会员标签使用铜色、驼色或低饱和金色。
- 密集内容使用细分隔线和浅灰分区带组织，不使用厚重边框。
- 采用熟悉的移动端模式：简洁顶栏、紧凑标签、四项底部导航，以及稳定的阅读或互动控制区。
- 保持可访问的对比度、清晰焦点状态，并确保触控目标至少为 44 px。
避免
- 不复制网易蜗牛读书的名称、Logo、字标、截图、书封、编辑图片、社区帖子或原产品文案。
- 不逐像素复刻参考页面。
- 避免彩色界面框架、霓虹强调、玻璃拟态、厚边框、深阴影、超大圆角和仪表盘式指标卡。
- 避免把每本书、每篇书评或每条评论都做成悬浮圆角卡片。
- 避免在小控件或密集元数据中使用衬线字体。
- 避免装饰性红色色块；强调色必须稀少且有明确目的。
- 除引导页或活动视觉外，避免使用巨大的装饰性水印字母。
引用路由
- 实现或审查界面时，必须读取 references/design-system.md。该文件定义视觉令牌、字体系统、发现与阅读模式、社交布局、书封处理、响应式转换和完成检查表。
- 生成界面代码或把设计稿转为代码时，再读取 references/implementation-recipes.md。该文件提供组件骨架、状态处理、响应式实现和技术栈适配规则。
- 只有从零创建原生 HTML/CSS 原型时才使用
assets/starter/；复制后应替换示例内容并删除与任务无关的模块。
