简诗高端网页视觉精修

解决哪些实际问题

直接让通用模型写前端页面，经常得到一种“看起来还行但一细看就崩”的结果：容器被限制得很窄，H1 被迫折行成五六行；Bento 网格里留下明显的空洞；文案里频繁出现 SECTION 01、QUESTION 05 这类廉价元标签；按钮文字与背景对比度不足，在深色或高饱和背景上几乎不可读；多屏之间布局重复，滚动时几乎没有运动反馈。这些不是审美偏好差异，而是模型在统计上倾向于安全、重复和偷懒的默认输出。

技能如何强制破局

这个技能的核心做法不是“提醒模型注意风格”，而是把设计决策拆成可校验的工程步骤：

• 伪 Python 确定性随机化：在写 UI 代码前，先根据用户 Prompt 的字符数生成确定性 seed，模拟 random.choice() 选择 Hero 架构、排版栈、3 个组件架构和 2 个 GSAP 范式，避免每次都落到第一个布局。
• AIDA 页面骨架：页面从高质感导航栏开始，依次进入 Attention、Interest、Desire、Action；主要区块之间使用 py-32 md:py-48 这样的大间距，让页面读起来像分章节的电影，而不是挤在一起的长图。
• Hero 双行硬约束：H1 必须使用 max-w-5xl、max-w-6xl 或 w-full 的宽容器，字号通过 clamp(3rem, 5vw, 5.5rem) 控制，确保 2–3 行内结束；禁止在 Hero 里放飘浮徽章、标题下 pill-tag 或原始数据。
• 无空洞 Bento 网格：每个 Bento Grid 都要求 grid-flow-dense，并显式推导 col-span 与 row-span 的锁合关系，杜绝缺角和空洞；卡片数量控制在 3–5 个，强调信息密度和样式精度。
• 真实 GSAP 运动：必须使用 @gsap/react 与 ScrollTrigger，实现卡片悬停缩放、Scroll Pinning、图片滚动增长并淡出、文本 scrub 揭示、卡片堆叠等动态反馈。
• 组件与资产策略：按需选择 Inline Typography Images、Horizontal Accordions、Infinite Marquee、Testimonial Carousel 等组件；图片统一走 https://picsum.photos/seed/{keyword}/1920/1080，并叠加 grayscale、mix-blend-luminosity、opacity-90 等滤镜避免素材感过重。
• 预检清单：写 React/UI 代码前必须先输出校验块，包含 Python RNG 模拟、AIDA 检查、Hero 数学验证、Bento 密度验证、Label Sweep 与按钮对比检查。

适用边界

它适合需要从零快速得到一版 AWWWARDS 风格页面骨架的前端工程师、设计工程师和原型构建者，尤其是需要反复生成但又不能每次都长得一样的场景。它不负责自动安装依赖、修改系统权限、创建持久化任务或执行下载内容；涉及发送、发布、删除、付款、部署等外部写入时，必须先展示目标与影响并获得明确确认。凭据只用于用户指定的对应官方服务，不回显、不记录、不转发。

使用注意点

输出默认是参考代码，只有在用户明确要求执行且目标范围清楚时才运行。工程化接入时建议继续把预检清单、组件清单和资产 URL 作为人工审查的锚点，不要跳过 Hero 行数与 Bento 密度的数学验证。

获取使用帮助和更多实用 Skill，请关注公众号「简诗 AI」，或在 SkillHub 搜索「简诗 AI」