skill-webdesign

Web Designer Skill

以敏锐的设计细节把控，为创建响应式、易维护的网站提供专家指导。

核心原则

设计一致性

• 首先加载项目风格指南——查看 references/styleguide.md 或项目的设计令牌
• 使用语义化颜色名称（--color-navy），而非原始值（#1E3A5F）
• 保持字体层级：每页使用一种展示字号，标题级别保持一致
• 间距：使用设计令牌（section-gap、card-padding），而非随意设置数值

移动优先的响应式设计

• 从移动端布局开始，再逐步增强大屏幕布局
• 断点：sm:640px、md:768px、lg:1024px、xl:1280px
• 触控目标：交互元素的最小尺寸为 44x44px
• 测试：在宽度为 320px 时，无需水平滚动即可阅读内容

无障碍设计的硬性要求

• 颜色对比度：正文文本为 4.5:1，大号文本为 3:1
• 焦点状态：所有交互元素均需清晰可见
• 语义化 HTML：正确的标题层级、地标元素和表单标签
• 图片：提供有意义的替代文本，或为装饰性图片设置 aria-hidden

技术栈：Astro + Tailwind + Cloudflare

项目结构

src/
├── components/
│   └── ui/           # Reusable UI components
├── layouts/          # Page layouts (BaseLayout.astro)
├── pages/            # Routes - each .astro = a page
├── content/          # Markdown/MDX for content collections
├── styles/           # Global CSS, Tailwind config
└── assets/           # Images, fonts (processed by Astro)
public/               # Static assets (copied as-is)

组件模式

Astro 组件——用于静态或轻度交互的 UI：

---
interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}
const { variant = 'primary', size = 'md' } = Astro.props;
---
<button class:list={['btn', `btn-${variant}`, `btn-${size}`]}>
  <slot />
</button>

内容集合——用于博客文章、报告和案例研究：

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.date(),
    featured: z.boolean().default(false),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { posts };

自动化模式

避免硬编码——采用数据驱动的方式：

---
// ❌ Hardcoded featured posts
const featured = [{ title: "Post 1" }, { title: "Post 2" }];

// ✅ Query from content collection
import { getCollection } from 'astro:content';
const featured = await getCollection('posts', ({ data }) => data.featured);
---

动态日期：

---
// ❌ Hardcoded year
const year = "2024";

// ✅ Dynamic
const year = new Date().getFullYear();
---
<footer>© {year} Company Name</footer>

基于环境的配置：

// astro.config.mjs
export default defineConfig({
  site: import.meta.env.PROD 
    ? 'https://example.com' 
    : 'http://localhost:4321',
});

落地页结构

必要版块

1. 主视觉区 - 清晰的价值主张和单个主要 CTA
2. 社会证明 - 徽标、用户评价、指标
3. 功能/优势 - 配有图标的 3-4 个要点
4. 工作原理 - 简单的 3 步流程
5. CTA 版块 - 在页脚前再次强调行动号召
6. 页脚 - 导航、法律链接、版权信息

SEO 检查清单

• 独特的 <title>（50-60 个字符）和 <meta name="description">（150-160 个字符）
• 用于社交分享的 Open Graph 标签
• 设置规范 URL
• 面向组织/产品的结构化数据（JSON-LD）
• 生成 Sitemap.xml
• 配置 robots.txt

性能目标

• Lighthouse 性能：>90
• 首次内容绘制：<1.5s
• 累积布局偏移：<0.1
• 对首屏以下的图片使用 loading="lazy"
• 优先使用带 WebP 格式和后备格式的 <picture>

工作流程

1. 开始之前：如果项目有设计系统，请加载 references/styleguide.md
2. 创建组件：创建新组件前，先检查现有 UI 组件
3. 样式设计：使用现有设计令牌；如有需要，提出将新增内容加入风格指南
4. 内容：对重复的内容类型使用内容集合
5. 测试：验证移动端布局、无障碍性和性能

参考资料

• references/styleguide.md - Fund Investigator 设计系统（颜色、字体、组件）
• references/astro-patterns.md - 常见 Astro 模式和易错点