設計相關網站

Icon、Font

orion
https://orioniconlibrary.com/all-icons

browse
http://www.alwayswithhonor.com

Simply beautiful open source iconsnpm install feather-icons
https://feathericons.com/

找字體

IOS

web fonts

web icon font

收集網頁的網站

chart
https://d3-discovery.net/

landing page
https://www.lapa.ninja/
http://land-book.com
https://grayic.com/shade/

others

其他未分類工具

Figma to gitlab
https://www.figma.com/community/plugin/860845891704482356/GitLab

Figma presentation template
https://www.templatery.co/

只用css background 組出畫布的小工具
https://zerodivs.com/

多網址變成一個短網址
https://www.linkslist.app/

字型搭配
https://fontjoy.com/

image to website
https://fronty.com/

解析度變好的工具
https://letsenhance.io/

Git Command Explorer
https://gitexplorer.com/

清cache
https://chrome.google.com/webstore/detail/clear-cache-for-chrome/lcebokhepdpopanpieoopnjiehmoabfp?hl=en_US&ref=producthunt

免費圖片上傳空間 無廣告
https://img.onl/

中文排版字典
https://www.w3.org/TR/clreq/

Google sheet to app
https://www.glideapps.com/?fbclid=IwAR3oanbGJlv16dVnS6uTdild1sy9yci-A4r7Y4u_o0uR6_iKNPuGEdnvMRE

Social Media Image Generator
https://promo.com/tools/image-resizer/?fbclid=IwAR1y48LUvQ5HmWcQi3bBwQ4IG8F48q6GblXR4ZWzcgptKVMGhgt71NiLmZA

不曉得該怎麼解釋的設計Guide,什麼都有
https://www.dimensions.guide/

挑選喜歡的coding字型
https://app.programmingfonts.org/

API收集網站
https://english.api.rakuten.net/

180個前端輔助工具表
https://ux.zeef.com/beatriz.martin

100個工具表
http://editorial.designtaxi.com/editorial-images/news-info120916/1.jpg

px to em
http://pxtoem.com

png  ico 互轉
http://convertico.com

video to gif
http://imgur.com/vidgif

圖片壓縮
https://www.imgbot.ai/
https://compressor.io
https://tinypng.com
https://www.jpeg.io/

https://squoosh.app/

https://resourcecards.com/

CDN
https://cdnjs.com/
http://www.bootcdn.cn

map
https://datamaps.co/

Licence 檢查表
https://www.openfoundry.org/LicenseWizard/

網址分流
https://hsienblog.com/2018/01/13/lihi-short-url/

網站meta tag
http://www.heymeta.com/
https://metatags.io/

包裝盒製作工具
https://easypackmaker.com/chooser

3D Mockups
https://www.screenspace.io/

VScode Theme
https://vscodethemes.com/

超強去背神器
https://www.remove.bg/
https://free.com.tw/slazzer/

網頁截圖並加上背景與瀏覽器
https://screen.guru/screenshot


各式產生器

3D產生器
https://spline.design/

sidemap 產生器
https://octopus.do/

qrcode 產生器
https://link-to-qr.com/

不是產生器但是有很多漂亮的css 3d圖形
https://polypane.app/css-3d-transform-examples/

SVG背景產生器
https://bgjar.com/

css書本產生器
3D Book Image CSS Generator
https://3d-book-css.netlify.app/

字型線上調整
https://seek-oss.github.io/capsize/

Blob 產生器
https://blobs.app/

社群照片產生器
https://ogimpact.sh/docs

Unscreen 線上影片去背工具,全自動去除背景支援 GIF 動態圖
https://www.unscreen.com/

svg placeholder code 產生器
http://knutsynstad.com/fauxcode/

人臉產生器
https://thispersondoesnotexist.com/

Neumorphism.io
https://neumorphism.io/#55b9f3

自動擷取人臉產生器
https://facemaze.io/

shadow產生器
https://brumm.af/shadows

背景紋理產生器 pattern
http://bg.siteorigin.com/
https://www.magicpattern.design/tools/css-backgrounds
https://doodad.dev/pattern-generator/

mockup動畫
https://www.screenspace.io/promo/

波浪 svg 產生器
https://getwaves.io/
https://svgwave.in/
https://wavelry.vercel.app/

圖片小放大
http://imglarger.com/

情境人物圖檔產生器
https://photos.icons8.com/creator

PDF格線產生器
https://incompetech.com/graphpaper/plain/

Mockup產生器
https://cleanmock.com/designer

SVG Gradient Map Filter Generator
https://yoksel.github.io/svg-gradient-map/#/

圓角svg產生器
https://www.blobmaker.app/?fbclid=IwAR1Zh6PbeEk1xg2iSmZJEojkBJB68-4e_Nhfn2ElCEPNSjB3zf9536btheo

網頁頁籤產生器 favicon
http://www.colinkeany.com/favicon-checker/?fbclid=IwAR1Hj-t2ZrQE0IOvOQ-NHskNLPTNDfdJ0r5PeHHf9kg6fS2smlfeQ49CvlM

假文產生器
http://www.lipsum.com/feed/html
http://richyli.com/tool/loremipsum/
http://generator.lorem-ipsum.info

身份產生器
http://www.fakenamegenerator.com/gen-random-us-us.php

APP Icon 產生器
https://makeappicon.com/

Browser 瀏覽器邊框產生器
https://www.screely.com/

UX Portfolio 產生器
https://www.uxfol.io/

程式碼美化圖產生器
http://codezen.rishimohan.me/
https://carbon.now.sh
https://codeimg.io/

大頭照產生器
https://uifaces.co/
http://uifaces.com/
https://joeschmoe.io/?ref=uxdesignweekly#sandbox

loading icon
http://loading.io
http://projects.lukehaas.me/css-loaders/
http://pathgather.github.io/please-wait/

border-radius 精彩變化產生器
https://9elements.github.io/fancy-border-radius/full-control.html?fbclid=IwAR0mLEM-pRJOIQWeFff9TGnRG0fcuTvETPMbB_jqgdxCWb-wMgRhpVzRMLo#10.10.10.10-90.90.90.90-.

Bootstrap theme 產生器
https://pikock.github.io/bootstrap-magic/app/index.html#!/editor

3D Mockup 產生器
http://threed.io/

Logo 產生器
https://www.launchaco.com/logo
https://mybrandnewlogo.com/
https://www.logoshuffle.com/

https://www.logoinstant.com/
Logo Instant 是一款提供免費可商業、學術用途的 LOGO 圖庫

方便的API提取網頁
https://www.lists.design/

google font 文字logo產生器
https://picas.now.sh/

前端查詢、檢查、檢核表

Web performance checklist
https://www.notion.so/Web-performance-checklist-02fbc975d9bd432993bdadce73de1b17

16 Things to Improve Your Website Accessibility
前端無障礙增進
https://websitesetup.org/web-accessibility-checklist/

前端檢查 checklist
https://frontendchecklist.io/
https://www.checklist.design/

UX checklist
https://uxchecklist.github.io/

檢查網頁字級
https://huu.la/ai/typesetter

CSS Reference
https://cssreference.io/

SASS速查表
https://www.css88.com/dev/sass.html?fbclid=IwAR3v-8K3BlGdWL0UEgKWSleJmyOXBUkayA18CEFqonxNMZOa5JX0GRC1KXk

CSS Selector 查詢表
https://adam-marsden.co.uk/css-cheat-sheet

CSS Trigers -觀看CSS特校所耗費的資源
https://csstriggers.com/#transform

CSS 在各瀏覽器與裝置上支援表
https://www.campaignmonitor.com/css/

chart guide book
http://devdocs.io/d3/

Libraries查詢
http://www.lib4dev.com/topics/html

快捷鍵查詢
https://shortcuts.design/index.html

Html meta check
http://www.heymeta.com/

The Ultimate Guide to CSS (電子郵件檢查)
https://www.campaignmonitor.com/css/
https://www.caniemail.com/

Git Command Explorer
http://gitexplorer.com/
Git 觀念
https://gitbook.tw/

CSS產生工具

Clip-path css generator
https://codepen.io/stoumann/full/abZxoOM

3D Book Image CSS Generator
https://3d-book-css.netlify.app/

transform function
https://css-transform.moro.es/

CSS Background Pattern
https://codier.io/challenge/S1TPAriI7
https://www.magicpattern.design/tools/css-backgrounds

CSS triangle generator
http://apps.eky.hk/css-triangle-generator/

Ceaser – CSS EASING ANIMATION TOOL
https://matthewlein.com/tools/ceaser

CSS 2 SASS/SCSS CONVERTER
http://css2sass.herokuapp.com/

Reset CSS
https://nicolas-cusan.github.io/destyle.css/

Fluid typography
https://fluid-typography.netlify.app/?mc_cid=631da96355&mc_eid=c38a7c572d
https://maximeroudier.com/typeScaleClampGenerator/?mc_cid=631da96355&mc_eid=c38a7c572d

line-height
https://www.thegoodlineheight.com/?mc_cid=631da96355&mc_eid=c38a7c572d

網頁顏色相關工具

制定顏色guideline
https://codyhouse.co/ds/globals/colors

漸層

farbvelo
https://farbvelo.elastiq.ch/

0to255類似
https://maketintsandshades.com/

鮮豔漸層產生器
https://mycolor.space/gradient

Color gradient generator
CSS COLOR GRADIENTS FOR COOL BACKGROUNDS AND UI ELEMENTS
https://mybrandnewlogo.com/color-gradient-generator

Gradient Magic
https://www.gradientmagic.com/

CSS Background
https://www.gradientmagic.com/

流動背景
http://www.bg-painter.com/

Ultimate CSS Gradient Generator
A powerful Photoshop-like CSS gradient editor from ColorZilla.
http://www.colorzilla.com/gradient-editor/

CSS Gradient Generator
http://www.css3factory.com/linear-gradients/

uigradients
https://uigradients.com/#Petrichor

CSS Gradient
https://cssgradient.io/h

The ultimate CSS tools for web designers
https://www.cssmatic.com/

CSS Gradient Generator
https://www.cssportal.com/css-gradient-generator/

CSS Gradient Generator
https://www.css-gradient.com/
http://qrohlf.com/trianglify/

Gradient Generator
https://gradientgenerator.com/

GShapy
https://shapy.app/

Serfo Css Gradients 
https://serfo.com/p/css-gradients/

配色

ai配色
http://colormind.io/

https://colorsinspo.com/?
https://colorhunt.co/
https://www.grabient.com/
http://khroma.co/
http://www.colorbox.io/ 與0to255類似
https://leonardocolor.io/
https://colorhub.me/
https://learnui.design/tools/accessible-color-generator.html 建議相似色
https://colors.eva.design/ 自動建議 success, info, warning, danger四種配色
https://pigment.shapefactory.co/?fbclid=IwAR1hR0xP_XhihO5MhsbKkBElmDJbgPHpXl_Ih2XshUtGB7xJ_jj6LcwXZGA
http://colllor.com/
https://picular.co/
https://color.adobe.com/zh/explore/?filter=most-popular&time=month
http://www.thedayscolor.com/#top
https://coolors.co/
http://www.colorfavs.com/palettes/
http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
http://www.0to255.com/
https://maketintsandshades.com/
https://www.colourlovers.com/
http://getuicolors.com/
https://www.degraeve.com/color-palette/index.php
https://www.materialpalette.com/
https://flatuicolors.com/
http://stylifyme.com/
https://www.webdesignrankings.com/resources/lolcolors/
http://colorsupplyyy.com/app/
https://webkul.github.io/coolhue/?2.0
https://www.colorbox.io/
https://colorable.jxnblk.com/
https://colorme.io/

特殊用顏色

日本色挑選
http://nipponcolors.com/

中國色挑選
http://zhongguose.com/

Material color theme
http://materialtheme.arcsine.org/?fbclid=IwAR0ceZnHO3h66L3chRuW_kxIlLzJ2MDBH5mfY0YajlyUiKab9ph9l1eyUcU

品牌顏色

https://brandcolors.net/

色盲檢查與應用

https://www.toptal.com/designers/colorfilter