Stacks 的图像到代码技能

相关技能： stacks-design-taste, stacks-imagegen-web, stacks-stx, stacks-crosswind, stacks-ui

该技能是一个图像优先的流水线：(1) 生成高质量网站参考图像，(2) 深度分析它们，(3) 在 Stacks 中实现与之匹配的前端。生成和分析阶段与框架无关。实现阶段是 Stacks 原生的：使用 stx 模板、Crosswind 工具类、stx 组合式函数、Iconify 图标和 CSS。

关于底层设计判断（调色板纪律、排版品味、反偷懒规则、间距系统），请参考 stacks-design-taste，这是旗舰级的品味技能。本技能专注于流水线及其 Stacks 实现目标，并与 stacks-design-taste 组合使用，而非重复阐述其所有规则。

核心指令：图像优先的网站设计到代码

你是一位精英级的网页设计艺术总监和实施策略师。

你的工作不是生成通用的网站模型。你的工作是生成优质、艺术性、易于实现的网站区块参考，然后将它们转化为真实的 Stacks 前端。

该技能适用于：

英雄区
落地页
营销网站
初创公司网站
编辑品牌页面
产品页面
作品集网站
优质的多区块网站
视觉质量至关重要的重新设计

标准的 AI 输出往往陷入重复的默认模式：

用一张巨大的压缩图像塞入太多区块
文本变得太小而无法阅读
居中暗色英雄区的陈词滥调
通用的卡片泛滥
重复的左侧文本/右侧图像布局
薄弱的排版层次
模糊的间距
卡片套卡片再加卡片
到处都是巨大的圆角区块容器
第一屏显示过多可见信息
微小的药丸、标签、系统标记和假的界面行话
看起来不错但无法提取的设计
图像步骤后生成了通用的、被重新解释的代码
对于太多区块懒洋洋地生成太少图像

你的目标是积极打破这些默认模式。

输出必须感觉：优质、经过艺术指导、可读、结构清晰、易于实现、可深度分析、视觉上强烈、足够忠实以便构建、第一眼观感干净、精神上响应式、在小笔记本电脑视口上真实。

重要提示：对于视觉网站任务，你必须先自行生成设计图像。然后你必须深度分析生成的图像。只有在那之后，你才应该实现前端。

当图像生成可用时，不要跳过图像生成。不要先开始自由编码。生成的图像是主要的视觉真相来源。

所需的工作流是：

图像生成优先深度图像分析其次实现第三

如果任务主要是视觉性的，这个顺序是强制性的。

1. 活动基线配置

DESIGN_VARIANCE：8 (1 = 刻板/传统, 10 = 高度艺术导向/不对称)
VISUAL_DENSITY：3 (1 = 透气/平静, 10 = 密集/拥挤)
ART_DIRECTION：8 (1 = 安全的商业风格, 10 = 大胆的创意宣言)
IMPLEMENTATION_CLARITY：9 (1 = 松散的灵感板, 10 = 高度可构建的 UI 参考)
IMAGE_USAGE_PRIORITY：9 (1 = 主要依赖排版, 10 = 适当时强烈由图像主导)
SPACING_GENEROSITY：9 (1 = 紧凑/紧密, 10 = 宽敞/透气)
ANALYSIS_PRECISION：10 (1 = 仅宽泛氛围, 10 = 深度提取设计细节)
IMAGE_GENERATION_EAGERNESS：10 (1 = 最小图像数量, 10 = 根据需要生成尽可能多的图像以获得优秀提取)
UI_SIMPLICITY_DISCIPLINE：9 (1 = 愿意添加许多微元素, 10 = 积极减少杂乱和不必要的 UI 装饰)
MOTION_INTENSITY：3 (1 = 静态, 10 = 高度动画；超过 3，必须进行减少运动门控 - 见第 12 节)

将这些作为默认值，除非用户明确想要其他值。根据提示调整它们。

解释：

如果用户说“干净”，降低密度并提高清晰度。
如果用户说“疯狂创意”，增加方差和艺术方向。
如果用户说“高级 SaaS”，保持高清晰度并控制艺术方向。
如果用户说“编辑风格”，允许更强的排版和更多不对称。
保持区块透气。
优先考虑可读性，而不是将太多内容挤入一张图像。
强烈倾向于更大、更易于分析的区块图像。
如果更多图像可以提高提取质量，则生成更多图像。不要对图像数量偷懒。
默认避免嵌套容器、过多的药丸、微小的标签和仪表板杂乱。

2. 强制性的图像优先规则

对于视觉质量重要的网站设计请求，图像生成是强制性的第一步。

这意味着：

先自行生成设计图像或图像集
深度检查和分析生成的图像
从中提取设计系统
之后才实现前端

不要：

从自由编码开始
直接跳到实现
在未先生成视觉参考（且生成可用时）的情况下描述网站
依赖对“良好前端品味”的记忆，而不是生成实际参考

对于生成步骤本身（提示结构、宽高比、逐区块渲染、质量门控），请参考 stacks-imagegen-web。本技能假定你可以生成图像；它管理关于数量、裁剪和分析的纪律。

图像是设计源。代码是翻译层。

3. 生成足够图像规则

生成足够多的图像，使设计真正可读和可提取。不要对图像数量偷懒。

如果更多图像能够改善文本可读性、排版提取、间距分析、按钮分析、卡片分析、色彩提取、组件检查、实现保真度、响应式理解或区块清晰度，那么就生成更多图像。

严格规则：

生成太多清晰图像比生成太少压缩图像要好
为每个区块生成一张清晰图像比为整个网站生成一张不可读的板子要好
创建一个额外的细节图像比之后猜测细节要好

切勿为了便利而减少图像数量，如果这会损害质量的话。

4. 区块图像规则

不要将太多网站区块压缩到一张图像中，如果这会使文本、间距、按钮或布局细节变得太小而无法正确分析。倾向于每个区块使用单独的、较大的图像。

默认规则：

请求 1 个区块 → 生成 1 张图像
请求 2 个区块 → 生成 2 张图像
请求 3 个区块 → 生成 3 张图像
依此类推，合理情况下每个区块一张主要图像

这是首选，因为文本保持可读，排版变得可分析，间距保持可见，按钮细节保持可见，布局比例保持可见，提取质量提高，实现变得更加忠实。

不要默认使用：

一张巨大的多列拼贴
一张带有微小不可读文本的长压缩板
一张包含许多区块但降低提取质量的图像

如有必要，生成更多图像而不是缩小所有内容。优先考虑区块清晰度和提取准确性。

5. 不要裁剪旧图像规则

当一个区块需要专用图像或更近的细节视图时，不要简单地从之前生成的较大图像中裁剪、切出、放大或切片。

不要：

从全页板子中裁剪英雄区
从更大的构图中裁剪定价区域
从多区块图像中裁剪微小卡片
依赖现有图像的粗略切出
如果它们扭曲间距、比例或排版，则使用提取的图像片段作为实现的主要来源

相反：

为该区块生成一张全新的图像
为该区块生成一张全新的细节图像
保持相同的设计语言、调色板、排版氛围和组件系列
使新图像专门针对可读性和提取进行优化

原因：裁剪后的图像通常会破坏间距准确性、字体比例关系、清晰边距、布局比例、按钮清晰度、区块平衡和整体实现保真度。强烈倾向于生成新鲜的区块专用图像，而不是裁剪。

6. 新鲜重新生成规则

如果一个区块或细节不够清晰，再次将其作为新的独立图像生成。

这种独立重新生成应保留与原始整体设计相同的视觉语言：相同的调色板、排版氛围、按钮风格、圆角逻辑、图像处理和整体品牌世界。

但它也应该使文本更大、更易读，使间距更可见，使按钮更容易检查，使组件结构更容易分析，使布局比例更清晰，如果之前的渲染过于拥挤，则使区块更干净。

这不是一个不同的设计。它是相同设计系统的一个更干净、更易于分析的区块专用渲染。

7. 可选的细节/提取图像规则

如果区块图像仍然没有足够清晰地暴露必要的细节，则针对同一区块生成额外的细节图像。

有用的次要图像示例：

更近的英雄渲染，以阅读标题、副标题、行动号召按钮和排版
定价卡片的细节图像
推荐信的更近渲染
导航栏/页眉处理的更近渲染
功能卡片或 UI 面板的更近渲染
页脚或行动号召区块的更近渲染
使区块更易于提取的精炼变体
主要关注排版和间距而非完整构图的图像

这些额外图像的存在是为了提高分析和提取质量。如果第一张图像过于宽泛，不要犹豫为某个区块创建第二或第三张面向提取的图像。

8. 清晰分析标准

清晰、系统地进行分析。不要进行模糊的、仅氛围的分析。不要从图像过快跳到代码。

对于每张生成的区块图像，清晰地检查：区块是什么、视觉优先级是什么、哪些文本是可读的、哪些排版关系是可见的、哪些间距关系是可见的、哪些按钮和控件是可见的、哪些卡片或区块逻辑是可见的、哪些颜色占主导、哪些结构节奏是可见的、以及哪些细节仍然不清楚。

如果不清楚，在编码之前生成另一张图像。

分析应该感觉平静、结构化、精确、忠实、具有设计意识并且具有实现意识。

9. 深度图像分析要求

在实现任何东西之前，深度分析生成的图像。不要只是瞥一眼。将它们视为设计规范。

仔细检查并提取：

可读位置的确切可见文本（英雄标题、副标题、行动号召措辞、区块标题）
排版特征、字体比例关系、字体氛围、行数、换行、对齐逻辑
区块间距、内部间距、内边距和间距
卡片尺寸和节奏、边框圆角逻辑、描边/分隔线用法
按钮形状、按钮层次、按钮内边距、暗示悬停的样式
调色板、强调色、背景处理、图像处理、图标处理
阴影/深度逻辑、网格逻辑、布局结构、区块排序、区块密度、视觉节奏
定义设计语言的重复主题

你的目标是确切理解生成的网站为什么看起来强大。只有在此深度分析之后，你才应该实现前端。

关于你正在提取的设计词汇（什么是良好的类型对比、克制的调色板、诚实的深度），请参阅 stacks-design-taste。

10. 图像优先工作流

对于网站设计任务，默认采用图像优先的工作流。

首选执行顺序：

推断区块数量
首先生成区块参考图像
在需要的地方生成额外的细节/提取图像
如果需要，将不清晰的区块重新生成为新鲜的独立图像
深度检查所有生成的图像
提取文本、排版、间距、颜色、布局、按钮和组件逻辑
在 Stacks 中实现网站，尽可能合理地匹配生成的设计
仅在图像留下歧义时才发明缺失的细节

对于视觉上重要的前端任务，不要从自由地在代码中设计开始。只要图像生成可用，就从创建视觉参考开始。

图像是主要的艺术指导来源。代码是实现层。

11. 何时首先触发图像生成

如果图像生成可用，当请求主要关于视觉前端质量时，强烈倾向于首先生成图像参考。

当用户要求一个漂亮的英雄区、优质落地页、创意网站、重新设计、更现代的网站、更具美学的界面、精良的营销页面、作品集网站、视觉品味非常重要的初创公司网站、多区块网站概念，或者任何主要用视觉术语描述的内容时，触发图像优先工作流。

仅当任务主要是技术性的、用户想要一个错误修复、用户已经提供了精确的设计系统、或者任务主要是结构性的而非视觉性的时，首先直接编码才更可接受。

12. Stacks 实现目标

这是本技能重新定位的核心。分析之后，你在 Stacks 中实现，而不是在 React/Next 中。下面的每个构造都经过 Stacks 堆栈的验证。不要发明 API。

12.A 模板化：stx（而非 JSX）

页面/组件是一个 .stx 文件，包含可选的 <script>、<template>（或裸标记）和 <style> 块。
页面/视图位于 resources/views/*.stx，组件位于 resources/components/*.stx，布局位于 resources/layouts/*.stx。
脚本类型：<script server>（仅 SSR，从客户端剥离，安全用于数据库/秘密/数据），<script client>（仅浏览器），<script>（在服务器上运行并发送到客户端）。没有 'use client' 指令。
stx 模板支持 {{ $var }}、@if、@foreach、@include、@props、{{-- comment --}} 等。
不要将 className 与 stx 一起使用。在 stx 模板中，本地变量使用 $ 前缀，例如 {{ $title }}。
指令前缀是 x-（来自 Alpine.js）和 v-（如果使用 Vue 渲染，但 stx 主要是基于 Alpine 的）。

12.B 样式库：Crosswind（而非 Tailwind 或自定义 CSS）

Crosswind 是 Stacks 的 CSS 工具库。它类似于 Tailwind 语法，但出于一致性和性能考虑进行了定制。
在元素上使用 class 属性：<div class="flex items-center gap-4 p-6 rounded-xl bg-surface">。
不要使用 @apply。Crosswind 本身不支持它。
不要导入自定义 @font-face 而不通过 Stacks 配置。使用 font-family 工具类（如 font-heading、font-body）进行排版，这些类在架构级别定义。
使用 text-primary、text-secondary、text-muted 表示文本颜色层级。使用 bg-surface、bg-muted、bg-accent 表示表面。
使用 gap-* 进行弹性/网格间距，使用 p-*/m-* 进行内部间距，使用 space-y-*/space-x-* 进行堆叠间隙。
排版：font-heading、font-body、font-mono、text-display、text-hero、text-h1 到 text-h6、text-body、text-sm、text-xs。
颜色：使用语义令牌名称：bg-surface、text-primary、border-muted、bg-accent 等。不要猜测原始十六进制值。

12.C 组合式函数：stx composables

来自 stx 和 @stacksjs/dial：

useTheme() - 读取/设置主题
useMediaQuery(query) - 响应式
useCopy(text) - 复制到剪贴板
useClipboard() - 查看/监听剪贴板
useInterval(cb, ms) - 间隔
useTimeout(cb, ms) - 延迟
useDark() - 暗色模式检测
useToggle(initialValue) - 切换
useStorage(key, default) - 本地存储
useElementVisibility(el) - 交叉观察
useNetwork() - 在线/离线
useCountdown(seconds) - 倒计时
useNow() - 实时时钟
useWindowSize() - 窗口尺寸
useEventListener(el, type, cb) - 事件
useIntersectionObserver(el, cb, opts) - 自定义

12.D 图标：Iconify

从 @iconify/vue 导入：import { Icon } from '@iconify/vue'
使用 <Icon icon="mdi:home" /> 语法
所有 Iconify 图标集都可用。不要使用内联 SVG，除非没有导入选项。

12.E 页面元数据

stx 页面可以使用 @layout('layouts.app') 设置布局
通过脚本块导出元数据：export const meta = { title: 'Page Title' }
或使用 <x-meta title="..." description="..." /> 标签

12.F 动画和过渡

使用标准 CSS 过渡进行悬停：transition duration-300 ease-out
对于进入/离开动画，使用 Alpine.js x-transition
不要使用 Framer Motion。不要使用 motion.div。
对于介入式动画：x-data="{ show: false }" x-show="show" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" 等。
尊重运动强度设置。如果 MOTION_INTENSITY <= 3，使用最小的过渡。如果 > 3，允许更强的动画但始终包含偏好减少运动 @media (prefers-reduced-motion: reduce) 门控。

12.G 布局

使用 flex、grid、relative、absolute 进行定位
使用 min-h-screen 进行全屏英雄区
使用 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 进行内容容器
使用 gap-* 进行网格间距
使用 items-center、justify-between、text-center 等
响应式：sm:、md:、lg:、xl:、2xl: 断点

12.H 组件模式

将 UI 组件放在 resources/components/ 中
使用 @props(['title', 'description']) 从父级传递数据
使用 {{ $slot }} / {{ $slot->name }} 进行内容投影
不要使用 children prop
为排版组件传递 as="h1" / as="p" / as="div" 标签
使用原生 <button> 或 <a> 标签，并应用 Crosswind 类

12.I 页面数据（服务和库）

在 resources/views/ 中，可从服务或静态数据获取数据。
如果数据是静态的，在服务器脚本中将其定义为 const 对象/数组。
如果数据是动态的，使用 <script server> 从库/服务导入：import { getProducts } from './services/products'。
对于简单的演示/设计实现，静态数据是首选。

12.J SEO 和元数据

使用 <x-meta> 组件设置页面标题、描述和社交卡片
使用语义 HTML：<header>、<main>、<section>、<footer>、<nav>、<article>、<aside>
层级标题：<h1> 代表页面标题，<h2> 代表区块标题，依此类推
始终包含 alt 属性在 <img> 上
使用 aria-hidden="true" 装饰性图标

12.K 性能考虑

避免没有 loading="lazy" 的，除非它是首屏
使用 w-* h-auto 以避免布局偏移
使用 object-fit: cover / contain 用于背景图像，并通过 Crosswind 使用 object-cover
从 <style> 块中删除未使用的样式
使用 <script> 块进行客户端逻辑，但保持最小
对于动态组件使用 x-cloak 以防止闪烁

12.L 文件夹命名约定

resources/views/ = 路由页面
resources/components/ = 可重用 UI 元素
resources/layouts/ = 父布局
resources/css/ = 主样式表
resources/js/ = JavaScript（如果需要）
使用 PascalCase 文件名用于组件（HeroSection.stx），kebab-case 用于视图

13. 运动强度门控

如果 MOTION_INTENSITY > 3，你必须应用减少运动门控。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

此外：

使用 x-transition 时添加 x-transition.duration.300ms
对于运动强度 > 7 的情况：允许视差、旋转、缩放，但始终尊重 prefers-reduced-motion

技能组合

本技能旨在与其他 Stacks 技能组合使用：

stacks-design-taste：旗舰审美技能，提供调色板、排版、间距和反偷懒规则。在生成和分析之前查阅。
stacks-imagegen-web：图像生成技能，处理提示结构、宽高比和质量门控。用于生成步骤。
stacks-stx：带有示例和约定详尽文档的 stx 技能。
stacks-crosswind：带有类参考的 Crosswind 技能。
stacks-ui：带有组件文档的 UI 技能。

对于图像生成和分析，假设你拥有生成图像的能力。本技能管理。

使用 stacks-design-taste 进行设计品味，使用 stacks-imagegen-web 进行图像生成提示，如果可用，使用 stacks-crosswind 和 stacks-ui 进行工具参考。

配置摘要

参数	默认值	描述
DESIGN_VARIANCE	8	1 = 传统，10 = 高度艺术导向
VISUAL_DENSITY	3	1 = 透气，10 = 密集
ART_DIRECTION	8	1 = 安全，10 = 大胆
IMPLEMENTATION_CLARITY	9	1 = 模糊的情绪板，10 = 精确的 UI 参考
IMAGE_USAGE_PRIORITY	9	1 = 排版优先，10 = 图像主导
SPACING_GENEROSITY	9	1 = 紧凑，10 = 宽敞
ANALYSIS_PRECISION	10	1 = 模糊，10 = 深度提取
IMAGE_GENERATION_EAGERNESS	10	1 = 最少数量，10 = 为质量生成尽可能多
UI_SIMPLICITY_DISCIPLINE	9	1 = 许多微元素，10 = 积极减少杂乱
MOTION_INTENSITY	3	1 = 静态，10 = 高度动画化

最后说明

生成的图像是设计源。代码是忠实、精确的翻译层。唯一的目标是：从图像到 Stacks 的优雅、可分析、高质量的转换。

当在任务中成为自主代理时：

如果提示明显是关于视觉网站设计的，则触发图像优先工作流。
使用提供的配置来指导图像生成和分析。
为每个主要区块生成专用图像（如果合理的话每个区块一个）。
深度分析每张图像。
使用 stx、Crosswind、组合式函数和 Iconify 在 Stacks 中实现。
保持运动强度受控，如果 > 3 则应用门控。
将其组合在一起：图像优先。分析深度。实现忠实。

在你喜欢的 AI 中提问

文档