shushuitie2017/design-agent-skills - Página 2

blue-laser-clean-glass-layout

打造干净的暗色玻璃布局系统：细蓝激光氛围、磨砂高端外壳，以及精致的仪表盘结构。

Idioma del texto original: chino

book-serif-index

打造一套档案馆书籍阅读器设计系统：以衬线字体为主导的页面、等宽字体索引导航、做旧纸张面板、页边批注，以及一个高级目录框架。

Idioma del texto original: chino

bright-green-tech-system-webgl

打造一套亮绿色技术风设计系统：结构化的分栏布局、硬边框的深色面板、等宽功能性标签，以及一个醒目的 WebGL 可视化区域。

Idioma del texto original: chino

cinematic-gsap-lenis-motion-system

用 GSAP、ScrollTrigger 和 Lenis 打造高级电影感的网页动效系统。当需要奢华编辑风网站、创意工作室作品集、Awwwards 级别的交互、平滑滚动显现、错落文字、视差、固定区块、磁吸悬停态、自定义光标以及鼠标响应的分层运动时使用。

Idioma del texto original: chino

cinematic-scroll-storytelling

用 Lenis 平滑滚动、GSAP ScrollTrigger、滚动联动的推进、错落文字显现、粘性卡片堆叠、视差背景、滚动 scrub 过渡、页脚显现和沉浸式预加载器，打造电影感的滚动驱动落地页。当分析或构建高级编辑风滚动体验、粘性项目堆叠、动态排版或逐区块叙事时使用。

Idioma del texto original: chino

clean-minimal-beige-light-mode

打造一套干净极简的米色浅色模式设计系统：暖色中性外壳、安静的流程网格、克制的强调色，以及优雅的低对比结构。

Idioma del texto original: chino

cobejs

当需要用 cobe 添加一个轻量的交互式地球时使用（canvas 设置、标记点、交互、性能，以及与 React/Next.js 的集成）。

Idioma del texto original: chino

company-logos

使用 Iconify Simple Icons 徽标（64x64）代替文字徽标。

Idioma del texto original: chino

container-lines

为精确、结构化的网页布局添加带迷你角方块的竖向容器尺寸参考线。当被要求容器线、测量式布局参考线、竖向边界线、编辑网格标记，或小角方块框架细节时使用。

Idioma del texto original: chino

corner-diagonals

给按钮、卡片、面板和容器外壳应用斜切角与倒角边。当设计需要精确的几何框架、科幻感 UI 面板、切角控件，或工程感的锐利容器，而非圆角药丸或普通矩形时使用。

Idioma del texto original: chino

corner-lasers

打造一个锚定于角落的激光构图：纤细光束、明亮的发射器节点、bloom，以及氛围辉光或雾。

Idioma del texto original: chino

css-alpha-masking

用 linear-gradient 应用 CSS alpha 遮罩，实现水平或垂直的边缘淡出（mask-image 和 -webkit-mask-image）。当被要求 alpha 遮罩、淡出边缘或 CSS 遮罩渐变时使用。

Idioma del texto original: chino

css-border-gradient

为高级网页面板应用微妙的渐变边框处理。当卡片、定价面板、导航栏、模态框、按钮或主视觉面板需要精致的边缘高光、又不要喧闹辉光时使用。

Idioma del texto original: chino

dark-blue-contrasting-clean

打造一套深蓝色的干净设计系统：强对比、钴蓝渐变特性区块、清爽的带框结构，以及克制的高级辉光。

Idioma del texto original: chino

dark-glass-clean-layout

打造一套深色玻璃布局系统：磨砂高级外壳、干净的多列工作区结构、悬浮数据卡片，以及克制的氛围纵深。

Idioma del texto original: chino

dither-background

创建一个暗色单色的程序化背景，带有放大的方形像素与可见的 Bayer 有序抖动。当页面需要一个氛围感的近黑抖动场、宽阔的有机波纹或云团、以及克制的灰白高光衬托在框选 UI、主视觉内容或数据叠层之后时使用。

Idioma del texto original: chino

dither-laser-dark-mode

创建一个暗色高级设计系统，融合近黑面板、微妙的有序抖动纹理，以及一道纤细的强调色激光氛围。

Idioma del texto original: chino

editorial-tech

将编辑排版式杂志构图与精密的产品科技细节相融合，采用非对称网格、电影感媒体条带、等宽实用标签与克制的强调色。

Idioma del texto original: chino

framed-grid-layout

创建极简的框选网格布局，带有可见的细边界线、L 形角标、微妙的斜线纹理与严格的区块对齐。当需要干净、中性、精准、结构化、编辑排版风、技术感或带引导边框的网页布局时使用。

Idioma del texto original: chino

framed-tech-dark-border-gradient

创建一个框选式暗色技术设计系统，带有边框渐变外壳、非对称网格面板、等宽实用标签与克制的单色氛围。

Idioma del texto original: chino

funky-purple-container-tech

创建一个以容器为主导的暗色技术设计系统，带有品红紫强调色、层叠的圆角外壳、清晰的框架线与俏皮的未来感焦点物体。

Idioma del texto original: chino

glass-dark-mode-clock

创建一个暗色玻璃设计系统，带有磨砂外壳、柔和光束网格、圆形时钟般的校准表盘，以及精准的科幻仪器框架。

Idioma del texto original: chino

glass-dark-ui

使用伪元素遮罩构建暗色模式的玻璃拟态界面，具备可读的对比度、磨砂面板与渐变边框。当需要玻璃卡片、磨砂暗色主视觉区、模糊面板，或带渐变/发光边框的暗色 UI 系统时使用。

Idioma del texto original: chino

globe-gl

当需要用 globe.gl (Globe.GL) 配合 WebGL/ThreeJS 实现 3D 地球数据可视化时使用，涵盖初始化、数据图层（点、弧线、多边形、标签），以及在纯 HTML 或 React 中的集成模式。

Idioma del texto original: chino

globe-particles

创建一个地球般的 3D 粒子可视化，带有密集发光的球形核心与更薄的轨道环或扁平圆盘。当设计需要用真实的 WebGL/Three.js 粒子渲染出高级的行星、轨道或合成数据地球效果时使用，而非普通的星空或整页布局变更。

Idioma del texto original: chino

gooey-blob-system

使用 SVG 滤镜创建黏稠融球系统，让多个形状融合为单一流体形态。用叠置的圆形结合高斯模糊与颜色矩阵滤镜，产生连续的有机团块。形态应根据彼此的距离在视觉上融合与分离。重点在于滤镜驱动的融合（模糊 + 阈值效果）、没有硬边的柔和有机边界、多个独立形状表现得如同一个系统，以及顺滑连续、显得流动而凝聚的运动。

Idioma del texto original: chino

gsap-scrolltrigger-storytelling

用 GSAP ScrollTrigger 构建电影感的钉住式产品叙事，含渐进式 UI 显现、与滚动同步的动画、顺滑插值，以及沉浸式的区块转场。

Idioma del texto original: chino

gsap

当你需要在 HTML/CSS/JS/React 中用 GSAP（时间线、ScrollTrigger、错峰、变换）添加或调试专业级网页动画时使用。包含顺滑运动、性能与常见坑的模式。

Idioma del texto original: chino

high-contrast-skeuomorphic-clean

创建一个高对比、干净的拟物设计系统，带有模塑感的暗色面板、清晰的明暗分隔、有触感的内嵌纵深，以及克制的信号强调。

Idioma del texto original: chino

image-first-grid-layout

创建一个以图像为主导的网格设计系统，带有满版摄影、结构引导线、锚定的内容块与克制的技术叠层。

Idioma del texto original: chino

landing-page

当为 SaaS/应用/服务设计或重写一个高转化落地页（单一报价页）时使用。涵盖结构、布局模式、转化策略、文案写作、SEO/AEO 以及常见坑。

Idioma del texto original: chino

light-mode-paper-technical

创建一套亮色技术设计系统：温暖的纸质面板、深色外框、微妙的斜向纹理、精确的括号式几何，以及克制的强调信号。

Idioma del texto original: chino

marquee-loop

用复制的条目实现无缝无限跑马灯循环。

Idioma del texto original: chino

masked-reveal

用 GSAP ScrollTrigger 在滚动时创建遮罩式逐词错落显现。当标题、主视觉文案、板块标题或编辑风文本应在进入视口时透过溢出遮罩逐词显现时使用。

Idioma del texto original: chino

matterjs

当用 Matter.js 实现 2D 物理交互时使用，包括 Engine/World 搭建、Render/Runner 配置、添加刚体与约束，以及对滚动/交互友好的 canvas 场景。

Idioma del texto original: chino

mesh-gradient-dark-blue-clean

创建一套未来感、高级、干净的深蓝网格渐变设计系统，贯穿背景渲染、主视觉外壳、导航、浮动节点、带框板块、CTA 和动效。当界面需要近黑的海军蓝基底、程序化蓝色网格氛围、克制的极简结构，以及基础设施感或行星级纵深时使用。

Idioma del texto original: chino

nested-container-clean-agency

创建一套由嵌套容器构建的干净代理公司（agency）设计系统：外层编辑风外壳、内嵌深色特性块、圆角高级卡片，以及克制的强调色。

Idioma del texto original: chino

nested-container-frames

用嵌套框架创建一套容器套容器的布局系统。用一个居中的外层容器，配以可见的垂直边界线和角部标记。内部放置从边缘内嵌的内部容器，每个都有自己的背景和圆角框架。技法：外层容器界定全局边界，内部容器用内边距创造内嵌间距，分层框架（边框 + 背景）区分层级，外框与内部块之间保持一致间距。

Idioma del texto original: chino

number-details

添加装饰性的 01、02、03 数字细节标记。

Idioma del texto original: chino

orange-clean-paper-saas

创建一套干净的纸色 SaaS 设计系统：温暖中性色、橙色强调信号、圆角高级表单，以及精致的产品插画面板。

Idioma del texto original: chino