假设你和设计师（前端开发人员）之间进行了良好的互动。所有最好的作品都来自协作和迭代，对吧？我相信这一点。但我也相信其中存在时间陷阱。如果你觉得因为不断被要求进行细微的设计调整而浪费时间，那么或许可以通过赋予设计师工具来进行调整，并准确地提供你所需的内容来解决问题。
让我们看一些简单的例子。
在空间中定位元素
假设你有一些绝对定位的元素。它们的精确位置是设计感觉的重要组成部分。你可以连接一个脚本，允许这些元素被拖动，然后用你需要放置它们的精确 CSS 报告它们的位置。
在这里，我使用了 David DeSandro 的 Draggabilly 来实现。
查看 Chris Coyier 在 CodePen 上编写的笔 可拖动元素，以 CSS 格式报告其位置（@chriscoyier）。
这是一个相当小的脚本，允许元素被拖动，当拖动事件停止时，它会根据该元素的 ID 和 top/left 位置创建一小段 CSS，并将该 CSS 放置在文档的右下角，以便复制粘贴并提供给前端开发人员。
更改字体
如何在一个出现在段落上的小 <select> 中，允许你在开发过程中在字体系列之间切换？
或者一个控制 line-height 的范围输入。
颜色选择器
在您选择的元素周围放置一个颜色选择器，并更改背景、填充、边框、描边、文本颜色等，应该不会太难。
JSColor
开发者工具培训
当然，构建自己的工具很棒，因为
它们可以根据你的喜好进行设计
你可以构建它们来更改任何东西
它们可以直接集成到设计中
但是……它们也是一堆工作。你很可能只需向设计师展示如何使用浏览器开发者工具来调整设计，就能获得很多好处。很有可能，他们会真正喜欢它。
你尝试过这样做吗？
虽然我在文章开头就提出了这个想法，即这可以为开发人员节省时间，因为你正在为设计师提供表达他们想法的工具，但它也可能适得其反。这意味着你可能会在这些小工具上花费大量时间，却发现它们很少被使用。像往常一样，沟通是关键。
你曾经尝试在你的团队工作流程中做类似的事情吗？
这正是我最初创建 hrtp://Bootswatchr.com 的原因，仅仅是为了让设计师和开发人员能够操纵 bootstrap 中的 variables.less 并获得他们正在做的操作的即时反馈。我不能说我曾经在一个说服他们使用它的团队中，但我感觉那是因为大多数应用程序都需要一些额外的东西。
我让我的设计师开始使用开发者工具。他们真的很喜欢！它实际上促使我的一个设计师开始学习 HTML 和 CSS，因为他厌倦了脱节。我也喜欢给他们所有的 SASS 变量，这样他们就不会疯狂地使用 25 种不同的蓝色阴影。
如果你的设计师疯狂地创建了 25 种不同色调的任何颜色，那么有人需要教他们一些关于设计的东西。
另一方面，在我看来，是设计师决定颜色，而开发人员则根据这些颜色创建变量。
现在，如果设计师理解颜色变量（它们如何工作以及为什么），那么他们就会被训练成不要疯狂地创建 25 种颜色的色调。
我书中的另一章说：UI/Web 设计师应该（也许“能够”在这里更合适）能够将他们自己的设计实现到 HTML+CSS+JavaScript 中。如果是这种情况，后端开发人员需要减少，大幅减少对设计/样式的担心，并专注于发挥他们的编程魔力。就像一开始就应该做的那样。
你表达的方式听起来像是在训练小猫“我让我的小猫玩新的玩具，在那里它们必须找到通往零食的路。它们真的很喜欢，现在它们对所有不同的测试都感到疯狂！”
开发人员经常会觉得设计师很笨，而设计师则会觉得开发人员很懒。
@Nathy，是的，有些人非常懒，这就是为什么我的 custom-script.js 文件中有这段代码。
uilang 试图帮助设计师将他们的想法传达给开发人员 :)
开发者工具培训万岁。令人惊讶的是，来自一线支持的许多工单一直发送到开发部门，如果更多的人能够自己使用 firebug，这些工单的速度可以加快。
我认为与此相关的是要建立一种文化，在这种文化中，每位员工不仅拥有职位名称，还拥有某种发展路径：客户支持技术人员可能希望将来晋升为前端开发人员，因此他最好准备好接受开发者工具的培训。有点像《最终幻想 I》，其中有战士 -> 骑士，盗贼 -> 忍者，等等等等
我在这里反复向设计师展示了如何使用开发者工具和 ColorZilla。他们说，
“哦，很酷！”然后直到下次才想起它们。
我说的是那些认为自己会做网页设计的印刷设计师。全职从事网页设计的设计师要好得多。尽管他们仍然假装不知道颜色对比要求以及需要用除颜色以外的东西来识别链接。（“但是下划线看起来不干净！”）
这是一个相当不友好的评论。如果我把所有开发人员都比作我一起工作的那个人，他会如何反应，他拒绝听取我对 UX 和 UI 的了解，并且不让我接触 SCSS 文件，即使我可以在他的语义 HTML 和模块化 CSS 知识方面大放异彩？我应该假设所有开发人员都是白痴吗？
只是说说而已
赞同 Rio 的评论。
我本人是印刷设计师（很多年），后来转型为网页设计师 - 前端开发人员（也有很多年）。
我处理过由 BBDO（是的，就是那个广告公司）的印刷设计师创建的设计稿，最终不得不修改他们的设计以适应现实，以便它们在技术上合理且可行地在 HTML+CSS+JS 中实现。
@chrisr，显然不是所有开发人员都是白痴，哈哈，但如果你确实像你说的那样了解 Sass/SCSS、语义 HTML 和模块化 CSS，那么你应该在一家真正重视这些技能的公司工作。
@chrisr，
我非常小心地说我是在评论这里工作的印刷设计师，而不是所有设计师。那不是敌意——只是我自 08 年以来在这里工作时的经历。
我在一个大型州政府机构工作，在那里高层管理人员非常重视设计，但从印刷的角度来看。（我们实际上必须打印出网页才能获得批准。）
情况可能糟糕得多——我见过很多糟糕的公共部门网站，设计显然不是优先事项。所以我们用现有的东西，选择我们的战斗。而且，与那些想要像素完美设计的人合作，而我却不得不维护可访问性，这让我成为了一个非常棒的 CSS 编码员。
但是响应式设计几乎已经让像素完美变得过时了。那些坚持将网络视为印刷页面的人，要么进化，要么自己变得过时。
我肯定会推动开发者工具培训。我们的设计师对 Chrome 开发者工具和 CSS 有足够的了解，可以向开发团队传达他们的观点。
我的设计师一直使用开发者工具，他很喜欢它，而且很擅长。他会确切地告诉我他想要什么，然后我就会编写实现该功能的实际代码，这在代码质量和设计细节之间取得了很好的平衡。我对设计也有很好的眼力，他相信我能成功地表达他的想法。
……这也是我认为“设计师/程序员应该/不应该编写代码/设计”的争论都是胡说八道的原因。拥有一点设计经验极大地帮助了我的职业生涯，而拥有一点编码经验也极大地帮助了我的设计师。与一个对两个世界都有所了解的人合作要容易得多。
如果关于绝对定位和行高的讨论很多，那么你遇到的不是沟通问题，而是招聘/团队组建问题。**尝试聘用一个真正的网页设计师**。构建一个用于拖动行高的网络工具相当荒谬，因为你可以直接使用 Firebug（或 Chrome 开发者工具等）。
当有 Firebug 和 DevTools 时，我也搞不懂为什么需要这些小工具。我也同意 Rio Brewster 的观点，不懂 html/css 以及如何使用这些工具的印刷设计师，仅仅完成了设计工作的一小部分。没有这些技能的设计师通常也落后于当前的趋势。我看到我认识的一些设计师的作品仍然没有响应式设计，或者使用图形作为标题，因为他们不知道如何实现排版。你能相信吗？
悲哀的是，是的。
好文章。Chrome 开发者工具已经有一个颜色拾取器了。
Demo
Safari 和 Firefox 的开发者工具也有一个。但是，我想如果你想尝试不同的颜色，在每个元素上更改颜色都太繁琐了。
仅供参考，Colorizr.js 可以更轻松地在网页上玩转调色板。
在拥有计算机图形学背景的网页和应用程序设计工作中，我喜欢用更多脚本，或者偶尔对编程代码进行一些简单的编辑，但我与团队中的程序员合作来完成这方面的大部分工作。我也曾对印刷设计师和网页设计之间的脱节感到沮丧。我相信，通过足够的教育和对跟上技术进步的渴望，可以弥合这些媒介设计之间的差距，但通常不会。我怀疑我会聘用印刷设计师来担任网页设计职位。在我看来，将 HTML/CSS 和图形设计职责分成两个职位似乎很奇怪。也许这是由于我在小型开发团队环境中的经验。
此外，Firebug 是我首选的测试工具。
好吧，对于那些既是优秀设计师又是优秀编码员的人，我们有一个称呼：独角兽。
恕我直言，真正优秀的图形设计并非可以通过学习或教授获得。这是一种天赋。
对于一个好的设计师来说，学习代码的基础知识比对于一个编码员来说学习如何进行优秀的图形设计要容易得多。
我擅长代码、信息架构、可用性和页面布局的应用程序设计——而且我知道优秀的设计是什么样的。这就是为什么我知道我永远不会成为一个优秀的设计师。
幸运的是，有很多设计师正在学习如何编写代码。他们是宝贵的。
@Ricardo Zeo，关于一个欣赏我的地方。完全同意。说起来容易做起来难，尤其是在当今网页设计工作室中似乎存在的年龄“甜蜜点”之外的时候！
@RioBrewster：我知道你并不是想把所有设计师都一概而论！我只是想反驳你的评论以阐明这一点。事实上，我最初是一名印刷设计师，在成为记者之后，30多岁的时候才开始从事这一行业。
我目前工作中最大的抱怨是让同事理解设计师不仅仅是选择颜色和字体；我不认为自己是一个装饰师。我是一个视觉沟通问题的解决者。
下台了！
那将是一个有趣的讨论话题。
这个行业是否存在年龄歧视？是否比其他任何科技行业都更严重？还是说只是没有跟上技术发展？
我将把我的（非常强烈的）意见留到那个讨论中。
@RioBrewster 我参加的其他社交媒体列表上也出现过这样的讨论。
我想知道有多少年轻人认为中年人不可能跟上技术发展？也许和我们中年人认为年轻员工不可能拥有多年与客户合作积累的判断力一样多。我肯定双方都存在无意识的或几乎没有意识到的偏见。
@ChrisR 确实，“甜蜜点”之外。我和你处境完全一样，而且年纪越来越大，哈哈。当你用这句话时，我也同意你的观点
@RioBrewster，这个行业是否存在年龄歧视？当然存在。就像我们西班牙语说的那样，“Como un putas！”。
也许 Chris（Coyer）会在本帖中注意到这个话题，并就此创建一个帖子 :)
如果 Chris Coyier 想写一篇关于网页开发中年龄歧视的文章，我敢打赌我可以征求 DC Web Women 的意见，我们在那里进行过长时间且有趣的讨论！
顺便说一句，我50多岁了，30多岁开始从事设计工作，继续自学 css、html、jquery、响应式设计、内容策略等方面的进步，但开始感觉自己像英国人说的那样，被淘汰了。我与之合作的年轻男性开发者经常表现得好像我什么都不懂，除了挑选漂亮的颜色之外，没有其他贡献。说真的。
我为自己拥有近 8000 名 Tumblr（designtank）粉丝而感到自豪，我想其中 98% 是青少年和 20 多岁的人（我没有展示我的照片，所以他们无法妄下结论！哈哈）。
我也对行业是否存在年龄歧视的讨论感兴趣。我四十多岁，现在才开始从事这个行业，基本上是因为在开发者和设计师之间工作产生的昂贵挫折。如果我早知道现在所知道的一切就好了！
在我工作的公司里，我确保向所有设计师展示了 Google Chrome 开发者工具。一旦他们克服了看到网站上进行的更改带来的震惊和敬畏之情，他们就开始将其融入到他们的流程中。
现在，他们会花时间查看他们希望事情如何完成，因此他们不再需要进行小的代码调整来“看看效果”。这对每个人来说都是双赢的……
我很想听听其他人的意见，我知道我们正在成为“互联网建设工厂”中一群非常专业的人，但我就是看不到那些不会做简单前端设计的设计师的用武之地。甚至不需要 JS，但至少要编写可靠的 HTML 和 CSS。如果你不会编写这些代码，你怎么能为网络进行最佳设计呢？
DevTools 和其他检查器的问题在于，从 UI 的角度来看，它们组织得不是很好，也没有经过充分的考虑。这很有讽刺意味。我宁愿将页面加载到 Espresso 等应用程序中，然后在那里玩弄 CSS。这是一种更好的体验，你可以专注于实际的设计，而不是需要在工具中点击的哪个小文本元素。
进行开发者工具培训。虽然我要说的是，我对设计师感到非常沮丧，我们确实会培训他们了解什么是最适合网络的。但说实话，为了获得网站设计的最佳效果，你几乎需要像前端开发人员一样了解很多东西，因为要考虑到悬停状态、响应式设计、用户旅程等。我更希望设计师能提供一套品牌指南，例如：要使用的颜色、徽标、字体系列、图像/页面元素。将这些与内容架构结合起来，然后让我以最符合用户体验的方式进行构建。
我是一名设计师兼前端开发人员，我不得不说开发者工具对于设计师微调页面来说是一个很棒的工具。我希望也能有一种方法在其中微调 Sass 变量。
Ryan，之前有一个 Firefox 扩展叫做 FireSass，但最近关闭了，因为据我了解 Firebug 或 Web 开发者工具将对 scss 文件进行源代码映射。我能够从我开发同事的 Mac 上安装 FireSass，它使我能够直接在 Firefox 中微调 scss，并告诉我们的开发人员我指的是哪些 scss 行。
我也用 Firefox 和 FireSass 进行开发。由于您无法再从公开网络下载 FireSass，因此我决定将 .xpi 文件上传到我的 Google Drive 供其他人下载。
从此处下载 FireSass 扩展：https://docs.google.com/file/d/0B3S7H2H7meSUdjBLWUpWd1BQaTg/
注意：我昨天（9/11/14）更新到了 Firefox 31，FireSass 没有捕获我的 SCSS 行。我需要运行其他测试才能确定是 Prepros 还是 Firefox 或 Firebug 或者是什么导致了问题。
如果您能分享您关于此方面的发现，那将非常感谢。谢谢。
当 Chrome 开发者工具内置了颜色拾取器 + 颜色选择器、更改字体大小和字体的功能，并且我能够通过更改位置值来移动元素时，我为什么要使用这些工具？:\
我读过的最糟糕的文章。
设计师应该创建前端，而不是程序员。如果网页设计师无法编写 html/css/js，她/他应该最终意识到网络不是印刷品。
@timbo html 和 css 对于设计师来说是可以了解的，但 js 与网站的外观无关。那只是为了功能性，应该由程序员处理。如果设计师开始处理这些东西，他们只会把事情搞砸，然后开发人员就会对此感到恼火。
@Tim 虽然我同意 JavaScript 与网站/应用程序的“外观”没有直接关联，但它肯定属于其“行为”的一部分，作为网页设计师/前端开发人员，我们对此负责。
我遇到的问题是，脚本编写可能会变得非常复杂和错综复杂，以至于在某些时候你必须寻求增援（后端开发人员）的帮助。
JavaScript 是一只难以驯服的野兽，因为它是一种[后端开发人员]在前端[网页设计师/前端开发人员]运行的脚本语言。
大家好，
设计无疑是一种天赋。编码可以通过时间和实践学习，但出色的设计源于一种自然的创造力，这本身就是一项稀缺的技能。
我认为人们应该发挥自己的优势，专注于他们最擅长的领域！
我是一名设计师，我进行 css/html 实现，因为我厌倦了在与开发人员分享模型时奇怪的沟通差距。
当您因为边距问题或行高问题而呼叫开发人员时，我发现这是一种侮辱。对我来说，感觉自己有点残疾，因为我无法自己做到。
当设计师编写标记时，开发人员可以完全专注于后端。不幸的是，我不会写 jquery，所以仍然存在差距，但很小。（我可以实现 jquery 插件，但当它们发生冲突时，我就完蛋了。）
甚至到了我将设计实现到印刷设计师的 html/css 中的地步。但是天哪，我再也不会这样做了。我无法想象那些每天都被懒惰的 jpg 模型喂养的可怜的开发人员。
所以：那里的设计师们。学习如何编写标记！！！
天哪。抱歉打字错误。
每次我阅读您的教程时，我的头都会晕。非常棒的小部件，而且那个行间距是一个令人大开眼界的！拖动功能也是一个享受，我钦佩您甚至如何实现某些元素“好像”我自己用动画拖动它们一样工作。