scandinavian-design Skill：把任意网站一键改造成北欧极简风的 Cursor AI 设计神器

scandinavian-design Skill：把任意网站一键改造成北欧极简风的 Cursor AI 设计神器

把网站变成北欧杂志风，只需要一句 prompt？这不是修图软件，这是 Eric Zakariasson（Cursor 团队工程师）刚刚开源的 scandinavian-design Skill——上传任意网站 URL，Cursor Agent 会自动分析页面结构，用北欧设计体系重写 CSS，让整个产品脱胎换骨。项目创建于 2026 年 8 月 12 日，上线不到 12 天 Twitter demo 已获 2,100+ 点赞，GitHub Star 234，仍处于爆发早期。

功能与原则

scandinavian-design 的核心能力是受控的视觉风格迁移：给定一个网站地址，Cursor Agent 会读取其 HTML/CSS 结构，然后按照斯堪的纳维亚设计语言重写视觉层，输出自包含的 HTML + CSS 文件，可直接在浏览器打开或集成到原项目。

设计原则极度克制：
– 黑白基色：以纯黑/纯白为核心，拒绝一切非必要的颜色
– 无衬线字体：优先系统无衬线族，确保跨平台一致性
– 大留白：间距显著放大，信息密度主动降低
– 克制的产品图：拒绝过度修饰的图片，用几何色块或纯色替代
– 无阴影、无圆角：不做任何”装饰性”元素，执行干净的线条感

认可度

截至 2026-08-24，GitHub Star 约 234 颗（创建仅 12 天，数据仍在快速爬升）。Twitter 发布的 before/after 演示帖获得 2,122 次点赞、506 次转发，在设计师和前端开发者社区引发大量讨论。Trending 周榜于 8 月第三周将其列入 AI Skills 板块推荐，增速在同期新晋 Skill 中排名前列。

链接

GitHub 仓库：https://github.com/ericzakariasson/scandinavian-design

在线 Demo：https://scandinavian-design.vercel.app

原作者

Eric Zakariasson（GitHub @ericzakariasson），Cursor AI 团队工程师，开源过多个高传播性实验项目，包括 Agent Swarm 可视化编排、Continual Learning 记忆系统等。其 Twitter/X 粉丝超过 4,000 条推文积累，擅长将 AI 能力包装成高传播性的视觉 demo。

介绍

这个 Skill 脱胎于 Eric 在 Cursor 设计系统内部的一次实验：设计师频繁需要把概念稿转成实际页面，但 AI 生成的界面往往”看起来像 AI 做的”——过度的阴影、渐变、圆角和彩色填充。scandinavian-design 用斯堪的纳维亚设计语言建立了一个逆向过滤器：不是让 AI 学会设计，而是告诉 AI 什么绝对不要做。

项目文件极简：整个 Skill 就是一个 skills/scandinavian-design/ 目录，包含 SKILL.md 声明文件和一个 CSS Override 层。10 个 Demo 网站覆盖了从电商、博客到 SaaS 仪表盘的场景，每个都有 Desktop 和 Mobile 两种尺寸的 Before/After 对比。项目还记录了每次迭代中学到的教训和被否定的设计假设，形成了真实的工程反馈文档（feedback.md）。

特点

• 零学习成本：安装一条命令，调用一个 prompt，直接出结果
• Before/After 可视化：内置 Remotion 视频工作流，可导出逐帧对比动画
• 风格自包含：输出的 CSS 是自包含的，不依赖外部库，无第三方字体加载
• 适用场景广泛：电商、产品页、博客、仪表盘、落地页均可适用
• 反馈驱动迭代：作者公开了每个 Demo 踩坑记录，风格边界有据可查
• 兼容多 Agent：Skill 声明基于 Claude Skill 规范，支持 Cursor、Claude Code 等主流 AI 编码工具

使用方法

安装（npx 方式）：

npx skills add ericzakariasson/scandinavian-design

安装（手动方式）：

git clone https://github.com/ericzakariasson/scandinavian-design
cd scandinavian-design
cp -r skills/scandinavian-design ~/.cursor/skills/
npm --prefix ~/.cursor/skills/scandinavian-design/scripts install

调用：
在 Cursor Composer 或 Chat 窗口中输入：

/scandinavian-design

然后描述你要改写的网站或粘贴 URL，Agent 自动完成重设计。

本地 Demo 演示：

npm install && npm run eval   # 重新抓取全部 10 个网站并截图对比
npm run site                 # 启动本地对比查看器（端口 4173）
npm run showcase            # 启动 Remotion 工作室
npm run showcase:render     # 导出最终 showcase.mp4

使用场景与人群

适用场景：
– 产品经理需要快速做概念验证的视觉稿
– 前端开发者需要把现有页面迁移到极简设计体系
– 设计师想让 AI 生成的原型更接近真实北欧杂志风
– 运营落地页 A/B 测试需要快速出多个风格版本

目标用户：
– AI 编程工具（Cursor / Claude Code / Codex）用户
– 对视觉品质有要求的产品设计师
– 需要快速原型迭代的前端团队
– 希望让自己的 AI 产出”不像 AI 做的”的技术人

输入与输出案例

输入示例：

请用 scandinavian-design 风格改写这个页面：
https://example-saas-landing.com

要求：
- 保持原有信息结构不变
- 仅修改视觉样式
- 输出为单个 HTML 文件

输出示例：
Agent 返回一个自包含的 redesigned.html，包含：
– 黑白为主色调的配色方案（无任何 #E5E5E5 类灰阶）
– 系统无衬线字体（-apple-system / Inter / Segoe UI）
– 所有元素间距乘以 1.5~2 倍系数
– 移除了所有阴影（box-shadow: none）
– 图片替换为黑白几何色块占位符
– 页面可立即在浏览器打开，效果即时可见

Skill 名称：scandinavian-design
GitHub：https://github.com/ericzakariasson/scandinavian-design
Star：234（截至 2026-08-24，12 天新项目）

GitHub: https://github.com/ericzakariasson/scandinavian-design