---
title: "设计"
canonical_url: "https://wwlight.vercel.app/bookmarks/design"
---
# 设计

## 灵感

<div className="grid,gap-4,sm:grid-cols-2,[&>*]:my-0!">
<tip to="https://dribbble.com/">

Dribbble - 发现世界顶级设计师

</tip>

<tip to="https://designsystems.surf/">

Design Systems Database - 导航

</tip>

<tip to="https://fountn.design/">

Fountn - 导航

</tip>

<tip to="https://www.gooddesign.tools/">

GoodDesignTools - 设计工具目录

</tip>

<tip to="https://rive.app/">

Rive - 图形的设计工具

</tip>

<tip to="https://www.dark.design/">

DarkDesign - 暗黑主题精选网站

</tip>

<tip to="https://www.footer.design/">

Footer - 页脚设计灵感

</tip>

<tip to="https://www.landingly.co/">

Landingly - 登陆页面设计

</tip>

<tip to="https://godly.website/">

Godly - 出色的网页设计灵感

</tip>

<tip to="https://www.awwwards.com/">

Awwwards - 最权威网页设计投票

</tip>

<tip to="https://www.curated.design/">

curated.design - 设计灵感精选

</tip>

<tip to="https://www.landing.gallery/">

landing.gallery - 落地页灵感

</tip>

<tip to="https://www.supahero.io/">

Supahero - 精心挑选的落地页

</tip>

<tip to="https://mobbin.com/">

Mobbin - UI/UX参考库

</tip>

<tip to="https://saaslandingpage.com/">

SaaS Landing - 落地页灵感

</tip>

<tip to="https://www.shejidaren.com/">

设计达人 - 爱设计，爱分享

</tip>

<tip to="https://github.com/jobbole/awesome-design-cn">

awesome-design-cn - 设计资源清单

</tip>
</div>

---

## 设计软件

<div className="grid,gap-4,sm:grid-cols-2,[&>*]:my-0!">
<tip to="https://www.canva.com/">

Canva - 在线平面设计

</tip>

<tip to="https://www.affinity.studio/">

Affinity - 专业设计套件

</tip>

<tip to="https://mastergo.com/">

MasterGo - 协作设计工具

</tip>

<tip to="https://www.figma.com/">

Figma - 界面设计协作

</tip>

<tip to="https://www.framer.com/">

Framer - 交互原型与建站

</tip>

<tip to="https://webflow.com/">

Webflow - 可视化建站

</tip>
</div>

---

## CSS · 配色

<div className="grid,gap-4,sm:grid-cols-2,[&>*]:my-0!">
<tip to="https://coolors.co/">

Coolors - 调色板生成器

</tip>

<tip to="https://webgradients.com/">

WebGradients - 线性渐变背景

</tip>
</div>

---

## CSS · 布局与形状

<div className="grid,gap-4,sm:grid-cols-2,[&>*]:my-0!">
<tip to="https://cssgrid-generator.netlify.app/">

CSS Grid Generator - 网格布局

</tip>

<tip to="https://bennettfeely.com/clippy/">

Clippy - clip-path 生成

</tip>

<tip to="https://css-generators.com/">

CSS Generators - 形状元素生成器

</tip>

<tip to="https://9elements.github.io/fancy-border-radius/">

FANCY-BORDER-RADIUS - 花式边界半径

</tip>

<tip to="https://getwaves.io/">

GetWaves - SVG 波浪生成

</tip>

<tip to="https://www.shapedivider.app/">

Shape Dividers - 分区形状

</tip>
</div>

---

## CSS · 阴影与材质

<div className="grid,gap-4,sm:grid-cols-2,[&>*]:my-0!">
<tip to="https://smoothshadows.com/">

Smooth Shadow - 阴影生成

</tip>

<tip to="https://glassgenerator.netlify.app/">

Glass Morphism - 毛玻璃效果

</tip>

<tip to="https://cn.pattern.monster/">

Pattern Monster - SVG 图案生成器

</tip>
</div>

---

## CSS · 动效与工具箱

<div className="grid,gap-4,sm:grid-cols-2,[&>*]:my-0!">
<tip to="https://easings.net/">

easings.net - 缓动曲线

</tip>

<tip to="https://omatsuri.app/">

Omatsuri - 前端小工具箱

</tip>

<tip to="https://uiverse.io/">

UIVerse - UI 组件片段

</tip>
</div>


## Sitemap

See the full [sitemap](https://wwlight.vercel.app/sitemap.md) for all pages.