К списку видео
S

Sketch Together

A design tool for humans and robots

Платформа
YouTube
Длительность
4:40
Язык в кадре
американский английский
Просмотры
585
Медианная склейка
5.64s
Лицо в кадре
99%
Тёмные кадры
2%
Sketch Together A design tool for humans and robots at 0:00
Sketch TogetherA design tool for humans and robots
0:00
Sketch Together A design tool for humans and robots at 0:16corner inset
Sketch TogetherA design tool for humans and robots
0:16
Sketch Together A design tool for humans and robots at 0:20corner inset
Sketch TogetherA design tool for humans and robots
0:20
Sketch Together A design tool for humans and robots at 0:25corner inset
Sketch TogetherA design tool for humans and robots
0:25
Sketch Together A design tool for humans and robots at 0:38corner inset
Sketch TogetherA design tool for humans and robots
0:38
Sketch Together A design tool for humans and robots at 0:39corner inset
Sketch TogetherA design tool for humans and robots
0:39
Sketch Together A design tool for humans and robots at 0:41corner inset
Sketch TogetherA design tool for humans and robots
0:41
Sketch Together A design tool for humans and robots at 0:42corner inset
Sketch TogetherA design tool for humans and robots
0:42
Sketch Together A design tool for humans and robots at 0:51corner inset
Sketch TogetherA design tool for humans and robots
0:51
Sketch Together A design tool for humans and robots at 0:53corner inset
Sketch TogetherA design tool for humans and robots
0:53
Sketch Together A design tool for humans and robots at 0:54corner inset
Sketch TogetherA design tool for humans and robots
0:54
Sketch Together A design tool for humans and robots at 0:54corner inset
Sketch TogetherA design tool for humans and robots
0:54
Sketch Together A design tool for humans and robots at 0:55corner inset
Sketch TogetherA design tool for humans and robots
0:55
Sketch Together A design tool for humans and robots at 0:56corner inset
Sketch TogetherA design tool for humans and robots
0:56
Sketch Together A design tool for humans and robots at 1:08corner inset
Sketch TogetherA design tool for humans and robots
1:08
Sketch Together A design tool for humans and robots at 1:10corner inset
Sketch TogetherA design tool for humans and robots
1:10
Sketch Together A design tool for humans and robots at 1:14corner inset
Sketch TogetherA design tool for humans and robots
1:14
Sketch Together A design tool for humans and robots at 1:18corner inset
Sketch TogetherA design tool for humans and robots
1:18
Sketch Together A design tool for humans and robots at 1:28corner inset
Sketch TogetherA design tool for humans and robots
1:28
Sketch Together A design tool for humans and robots at 2:07corner inset
Sketch TogetherA design tool for humans and robots
2:07
Sketch Together A design tool for humans and robots at 2:07corner inset
Sketch TogetherA design tool for humans and robots
2:07
Sketch Together A design tool for humans and robots at 2:08corner inset
Sketch TogetherA design tool for humans and robots
2:08
Sketch Together A design tool for humans and robots at 2:10corner inset
Sketch TogetherA design tool for humans and robots
2:10
Sketch Together A design tool for humans and robots at 2:14corner inset
Sketch TogetherA design tool for humans and robots
2:14
Sketch Together A design tool for humans and robots at 2:14corner inset
Sketch TogetherA design tool for humans and robots
2:14
Sketch Together A design tool for humans and robots at 2:21corner inset
Sketch TogetherA design tool for humans and robots
2:21
Sketch Together A design tool for humans and robots at 2:22corner inset
Sketch TogetherA design tool for humans and robots
2:22
Sketch Together A design tool for humans and robots at 2:23corner inset
Sketch TogetherA design tool for humans and robots
2:23
Sketch Together A design tool for humans and robots at 2:28corner inset
Sketch TogetherA design tool for humans and robots
2:28
Sketch Together A design tool for humans and robots at 2:30corner inset
Sketch TogetherA design tool for humans and robots
2:30
Sketch Together A design tool for humans and robots at 2:31corner inset
Sketch TogetherA design tool for humans and robots
2:31
Sketch Together A design tool for humans and robots at 2:37corner inset
Sketch TogetherA design tool for humans and robots
2:37
Sketch Together A design tool for humans and robots at 2:42corner inset
Sketch TogetherA design tool for humans and robots
2:42
Sketch Together A design tool for humans and robots at 2:50corner inset
Sketch TogetherA design tool for humans and robots
2:50
Sketch Together A design tool for humans and robots at 2:51corner inset
Sketch TogetherA design tool for humans and robots
2:51
Sketch Together A design tool for humans and robots at 2:54corner inset
Sketch TogetherA design tool for humans and robots
2:54
Sketch Together A design tool for humans and robots at 2:58corner inset
Sketch TogetherA design tool for humans and robots
2:58
Sketch Together A design tool for humans and robots at 3:02corner inset
Sketch TogetherA design tool for humans and robots
3:02
Sketch Together A design tool for humans and robots at 3:06corner inset
Sketch TogetherA design tool for humans and robots
3:06
Sketch Together A design tool for humans and robots at 3:08corner inset
Sketch TogetherA design tool for humans and robots
3:08
Sketch Together A design tool for humans and robots at 3:10corner inset
Sketch TogetherA design tool for humans and robots
3:10
Sketch Together A design tool for humans and robots at 3:11corner inset
Sketch TogetherA design tool for humans and robots
3:11
Sketch Together A design tool for humans and robots at 3:14corner inset
Sketch TogetherA design tool for humans and robots
3:14
Sketch Together A design tool for humans and robots at 3:18corner inset
Sketch TogetherA design tool for humans and robots
3:18
Sketch Together A design tool for humans and robots at 3:22corner inset
Sketch TogetherA design tool for humans and robots
3:22
Sketch Together A design tool for humans and robots at 3:26corner inset
Sketch TogetherA design tool for humans and robots
3:26
Sketch Together A design tool for humans and robots at 3:30corner inset
Sketch TogetherA design tool for humans and robots
3:30
Sketch Together A design tool for humans and robots at 3:34corner inset
Sketch TogetherA design tool for humans and robots
3:34
Sketch Together A design tool for humans and robots at 3:38corner inset
Sketch TogetherA design tool for humans and robots
3:38
Sketch Together A design tool for humans and robots at 3:45corner inset
Sketch TogetherA design tool for humans and robots
3:45
Sketch Together A design tool for humans and robots at 3:45corner inset
Sketch TogetherA design tool for humans and robots
3:45
Sketch Together A design tool for humans and robots at 3:46corner inset
Sketch TogetherA design tool for humans and robots
3:46
Sketch Together A design tool for humans and robots at 3:49corner inset
Sketch TogetherA design tool for humans and robots
3:49
Sketch Together A design tool for humans and robots at 3:49corner inset
Sketch TogetherA design tool for humans and robots
3:49
Sketch Together A design tool for humans and robots at 4:14corner inset
Sketch TogetherA design tool for humans and robots
4:14
Sketch Together A design tool for humans and robots at 4:34corner inset
Sketch TogetherA design tool for humans and robots
4:34

Расшифровка: A design tool for humans and robots

Расшифровано речевой моделью по звуку самого ролика, а не написано брендом. Нажмите на строку, чтобы перейти к этому моменту.

  1. 0:00Hello, everyone. I wanted to show you a new tool that I've been working on that is called
  2. 0:03Efecto Studio, and it's a design tool for Vive designing, meaning that you can use an AI agent
  3. 0:10to design with you to be a co-designer. If you're a designer who has been using other tools for
  4. 0:17creating UX or UI or graphic design on the web, then this is going to be very familiar with you
  5. 0:23because here it has Flexbox so you can move things around if you want to, classes from Tailwind
  6. 0:29and other web standards.
  7. 0:31For example, here, I can change it to large
  8. 0:33or I can change it to 5XL.
  9. 0:35I can change all the different things
  10. 0:36that you would expect from a design tool.
  11. 0:38And for example, here you can create
  12. 0:40all the way to any site or any page.
  13. 0:43For example, this one was created by an AI agent.
  14. 0:46I asked it to create a page
  15. 0:47that was like a portfolio for Dieter Rams,
  16. 0:50the famous designer.
  17. 0:51And then it made this.
  18. 0:52It made all of this stuff.
  19. 0:54I put all the different 10 principles.
  20. 0:56And once it makes it,
  21. 0:57I can actually also edit it. That's the cool thing about this, that I can come in here and edit
  22. 1:02anything that I want to. If I wanted to move one of these things around, if I wanted to move the
  23. 1:07principles. So all of this is editable. It's just like any other design tool. But the thing is that
  24. 1:12it connects really well with an AI agent. And to do that, you can just go to the documentation and
  25. 1:18then here, copy this. And if you use Cloud Code or use Gemini or Codex or any of those AI agents,
  26. 1:24you can use this. So you just like copy the MCP server and then go to your terminal. And then here
  27. 1:29I can just paste that and then it will install the MCP server. It's already installed on my computer.
  28. 1:33So it just tells me like, Hey, what are you doing? But once I have that, I can come in here and just
  29. 1:37like open cloud code. And then I will ask it to create something new, create a website for my baby
  30. 1:43who is one month old and her name is Elena. Okay. So I am going to create a little website for
  31. 1:50Elena. So you can see that actually I forgot to tell it to use the studio. That is important. So
  32. 1:56use a studio. So you have to say that to use a studio and then it will create the website for
  33. 2:01that. So it's a studio session for Elena. And then here it created a website for me. It created a
  34. 2:07link where I can go and open the session. So it is opening the same file, but it's just like opening
  35. 2:12as a session while it's working. Now it's detecting that it is open and it's going to start putting
  36. 2:17the website there. So I can see that it's over here. It's just starting to put everything. So
  37. 2:22let me just keep this open so I can see what is happening. So you can see that it's starting to
  38. 2:26think. It's just starting to add the artboard. It added the little Elena Hero section. And you can
  39. 2:32see that it's adding all of the code and all of the code is actually just being applied in the
  40. 2:36design tool in real time over here. And the cool thing is that at any time, since this is just a
  41. 2:40design tool, I can come in here and edit anything if I want to, even while it's working, I can change
  42. 2:45text anything so in a way it is co-designing with you so this thing is over here the little spirit
  43. 2:51in the machine is just designing with you while you are also doing other stuff so i can see that
  44. 2:55it's been pretty good it's putting the weight of elena it's putting different milestones it's
  45. 3:00putting a gallery of different emojis for elena it's really nice send with love and then a little
  46. 3:06further that's really nice let's see if it finished yeah let me zoom in to fit there you go so it's
  47. 3:11in to fit so we can see the site. We have a section here. It added the hero. It added different
  48. 3:17sections. I can come in here and I can just like edit anything about Elenita. Also, all of this is
  49. 3:24responsive. You can see that it's all responsive because it's using Flexbox, it's using Grid,
  50. 3:29it's using Web Standards, and it's also using in the background like Tailwind and other types of
  51. 3:33classes like that. And also, I can come in here and copy the code. I can select an artboard and
  52. 3:38just like copy the code. Now it's in my clipboard and I can paste it as code anywhere, or I can go
  53. 3:43here to file and just like export the code and export with the tailwind that the HTML, everything.
  54. 3:49I'm working on making it so it exports with React components too, all the buttons and all the
  55. 3:54different elements you will want in a page. So it has everything that is functional. Just starting
  56. 3:59is still a little bit buggy, I would say, but it's getting better. By the way, if you don't have a
  57. 4:05terminal agent, a CLI agent, or you're not using any of that. You can also use that AI that is
  58. 4:11right here. That is, I call it Jules. It's Jules because one of the best designers I ever met,
  59. 4:16her name was Julieta. And I wanted to make the synthetic version of Julieta. So it's Jules
  60. 4:22AI over here. And you can just like chat with it and then you can iterate on stuff. You can
  61. 4:26select on things and say like, make me three more versions of it if you want to. So yeah,
  62. 4:31I would love to, I don't know, give it a try, see how it's going.
  63. 4:35Efecto.app.studio and you can just test it around.
  64. 4:39Thank you so much.
64 строк · 1 025 слов

Lit and framed like this

Closest on how much of the running time has a face in it and how dark the frames are.